<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆方之间π - Between Circle & Square π</title>
    <meta name="description" content="圆方之间π：通过蒙特卡洛等多种算法可视化探索π值，在圆与方形的几何世界中发现数学之美">
    <link rel="stylesheet" href="styles.css">
    <!-- 添加图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
    <!-- 添加动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <!-- 添加粒子效果库 -->
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <!-- 添加Three.js 3D库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <style>
        /* Base body adjustments for better readability */
        body {
            font-size: 15px; /* Slightly larger base font */
            line-height: 1.65; /* Slightly more line height */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden; /* 防止水平滚动 */
            overflow-y: auto; /* 允许垂直滚动 */
        }

        .app-container {
            padding: var(--section-gap);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow: visible; /* 允许内容溢出容器 */
            max-width: 80%; /* 整体宽度控制为屏幕的80% */
            margin: 0 auto; /* 居中显示 */
        }

        /* Typography Enhancements */
        h1.gradient-text {
            font-size: clamp(1.8rem, 3vw, 2.8rem); /* 响应式字体大小 */
            text-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block; /* 确保渐变正确应用 */
        }

        .description { /* Assuming this is the <p> under the h1 */
            font-size: clamp(0.9rem, 1.5vw, 1.05rem); /* 响应式字体大小 */
            color: var(--text-secondary);
            line-height: 1.7;
            max-width: 600px; /* Constrain width for readability */
            margin: 0 auto 15px auto; /* Center if header is centered */
        }
        
        h2 { /* For section titles like "蒙特卡罗模拟" */
            font-size: clamp(1.2rem, 2vw, 1.6rem); /* 响应式字体大小 */
            letter-spacing: 0.5px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.08);
            padding-bottom: 10px; /* Add some space below h2 in card headers */
        }

        h3 { /* For control group titles like "模拟速度" */
            font-size: clamp(1rem, 1.5vw, 1.15rem); /* 响应式字体大小 */
            font-weight: 600; /* Ensure it's bold enough */
            color: var(--text-color);
            letter-spacing: 0.3px;
            margin-bottom: 12px; /* More space below h3 */
        }

        /* 改善理论和设置部分的文本样式 */
        .theory-content p, 
        .settings-content span,
        .theory-content ul li {
            color: var(--text-color);
            margin-bottom: 12px;
            font-size: 1.05rem;
            line-height: 1.7;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .theory-content ul {
            padding-left: 20px;
            margin: 15px 0;
        }

        .theory-content ul li {
            margin-bottom: 8px;
        }

        .theory-content p strong,
        .settings-content span strong {
            color: var(--primary-color);
            font-weight: 600;
        }

        /* 全局布局优化 - 调整三栏比例，增加中间模拟区域空间 */
        .content-wrapper.three-column {
            display: flex;
            gap: var(--main-content-gap, 24px);
            height: auto;
            min-height: 0;
            flex: 1;
            flex-wrap: nowrap;
            overflow: visible;
        }
        
        .content-wrapper.three-column > .sidebar {
            flex: 0 0 20%; /* 左侧栏固定占20%宽度 */
            min-width: 0; /* 移除最小宽度限制 */
            max-width: none; /* 移除最大宽度限制 */
        }
        
        .content-wrapper.three-column > .simulation-area {
            flex: 4; /* 与右侧图表区域平分剩余空间 */
            min-width: 0; /* 移除最小宽度限制 */
        }
        
        .content-wrapper.three-column > .chart-area {
            flex: 4; /* 与中间模拟区域平分剩余空间 */
            min-width: 0; /* 移除最小宽度限制 */
        }

        /* 模拟区域优化 - 增加尺寸和视觉效果 */
        .simulation-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            padding: 24px !important; /* 增加内边距 */
            border-radius: 20px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }
        
        .simulation-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.15) !important;
        }
        
        .canvas-wrapper {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 500px !important; /* 增加最小高度 */
            aspect-ratio: 1 / 1; /* 保持1:1的宽高比 */
            overflow: hidden;
            margin: 20px 0; /* 增加上下边距 */
            border-radius: 12px;
            background: rgba(var(--primary-color-rgb), 0.02);
            border: 1px solid rgba(var(--primary-color-rgb), 0.05);
        }
        
        canvas#simulationCanvas {
            max-width: 98%; /* 增加画布最大宽度 */
            max-height: 98%; /* 增加画布最大高度 */
            object-fit: contain;
        }

        /* 单选按钮样式增强 - 优化每次迭代次数的样式 */
        .radio-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            width: 100%;
            margin-top: 10px;
        }
        
        .radio-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            height: 42px; /* 增加高度 */
            padding: 0;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            background: rgba(var(--primary-color-rgb), 0.03);
            border: 1px solid rgba(var(--primary-color-rgb), 0.1);
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .radio-btn:hover {
            background: rgba(var(--primary-color-rgb), 0.08);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }
        
        .radio-btn input {
            position: absolute;
            opacity: 0;
        }
        
        .radio-btn input:checked + span {
            color: white;
            font-weight: 600;
        }
        
        .radio-btn span {
            font-weight: 500;
            font-size: 1.05rem;
            color: var(--text-secondary);
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            z-index: 2;
        }
        
        .radio-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-gradient);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            z-index: 1;
        }
        
        .radio-btn input:checked + span {
            color: white;
        }
        
        .radio-btn input:checked ~ .radio-btn {
            background: var(--primary-gradient);
        }
        
        .radio-btn input:checked + span::after {
            background: white;
        }
        
        .radio-btn input:checked ~ .radio-btn::before {
            opacity: 1;
        }
        
        /* 选中效果 */
        .radio-btn input:checked ~ .radio-btn {
            box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
        }
        
        /* 当input被选中时，改变其父元素的背景 */
        input[type="radio"]:checked + span {
            color: white;
            position: relative;
            z-index: 2;
        }
        
        /* 这个伪元素用于创建渐变背景 */
        .radio-btn input:checked + span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 30px;
            background: var(--primary-gradient);
            z-index: -1;
        }
        
        /* 使label本身在input被选中时也有样式变化 */
        .radio-btn:has(input:checked) {
            background: var(--primary-gradient);
            border-color: transparent;
            box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.3);
        }

        /* 设置项样式优化 */
        .settings-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 15px;
        }
        
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: #f8f9fa; /* 更淡的背景色 */
            border-radius: 12px;
            border: none; /* 移除边框 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 更微妙的阴影 */
            transition: all 0.2s ease;
        }
        
        .setting-item:hover {
            background: #f1f3f5; /* 稍微深一点的背景色 */
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
        }
        
        .setting-item span {
            font-weight: 500; /* 不要太粗 */
            font-size: 0.95rem;
            color: #495057; /* 更柔和的文本颜色 */
        }
        
        /* 现代复选框样式 */
        .setting-checkbox {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        
        .checkbox-container {
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            user-select: none;
        }
        
        .checkmark {
            position: relative;
            display: inline-block;
            height: 22px;
            width: 22px;
            background-color: #f1f3f5;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .setting-checkbox:checked ~ .checkmark {
            background-color: var(--primary-color);
        }
        
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 8px;
            top: 4px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .setting-checkbox:checked ~ .checkmark:after {
            display: block;
        }
        
        .checkbox-container:hover .checkmark {
            background-color: #e9ecef;
        }
        
        .setting-checkbox:checked ~ .checkbox-container:hover .checkmark {
            background-color: var(--primary-color-light, #5c7cfa);
        }

        /* 滑动条样式增强 - 修复点大小滑动条 */
        .slider-container {
            display: flex;
            align-items: center;
            width: 100%;
            margin-top: 10px;
            gap: 15px;
            padding: 0 5px;
        }
        
        /* 统一滑动条的标签和值样式 */
        #point-size-label {
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--text-color);
            margin-bottom: 10px;
            display: block;
            padding: 0 5px;
        }
        
        .slider-value {
            min-width: 35px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: 700;
            font-size: 1rem;
            color: white;
            background: var(--primary-color); /* 使用纯色背景 */
            border-radius: 15px; /* 使用圆角矩形 */
            padding: 0 12px;
            box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.2); /* 减轻阴影 */
            order: 1; /* 确保数值显示在右侧 */
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }
        
        /* 滑动条动效 */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px; /* 减小轨道高度 */
            border-radius: 4px; /* 调整边框半径 */
            background: #e0e0e0; /* 未滑动到的部分使用灰色 */
            outline: none;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); /* 减轻阴影 */
            margin: 0;
            order: 0; /* 确保滑动条在左侧 */
            position: relative;
            cursor: pointer;
        }
        
        /* 为滑动条添加滑动到的部分的样式 */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 8px; /* 减小轨道高度 */
            border-radius: 4px; /* 调整边框半径 */
            background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--value-percent, 50%), #e0e0e0 var(--value-percent, 50%), #e0e0e0 100%);
        }
        
        input[type="range"]::-moz-range-track {
            height: 8px; /* 减小轨道高度 */
            border-radius: 4px; /* 调整边框半径 */
            background: #e0e0e0;
        }
        
        input[type="range"]::-moz-range-progress {
            height: 8px; /* 减小轨道高度 */
            border-radius: 4px 0 0 4px; /* 调整边框半径 */
            background: var(--primary-color);
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px; /* 减小滑块大小 */
            height: 16px; /* 减小滑块大小 */
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* 减轻阴影 */
            border: 2px solid var(--primary-color);
            transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
            margin-top: -4px; /* 调整垂直位置，确保居中 */
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 16px; /* 减小滑块大小 */
            height: 16px; /* 减小滑块大小 */
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* 减轻阴影 */
            border: 2px solid var(--primary-color);
            transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        }
        
        input[type="range"]:hover::-webkit-slider-thumb {
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.3); /* 减轻阴影 */
        }
        
        input[type="range"]:hover::-moz-range-thumb {
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.3); /* 减轻阴影 */
        }
        
        /* 激活状态动效 */
        input[type="range"].active::-webkit-slider-thumb {
            transform: scale(1.25); /* 减小缩放倍数 */
            box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.15); /* 减轻光晕效果 */
        }
        
        input[type="range"].active::-moz-range-thumb {
            transform: scale(1.25); /* 减小缩放倍数 */
            box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.15); /* 减轻光晕效果 */
        }
        
        input[type="range"]:focus {
            outline: none;
        }
        
        input[type="range"]:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.2); /* 减轻光晕效果 */
        }
        
        input[type="range"]:focus::-moz-range-thumb {
            box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.2); /* 减轻光晕效果 */
        }
        
        .slider-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-top: 8px;
            padding: 0 2px;
        }
        
        /* 响应式调整 - 优化断点和行为 */
        @media (max-width: 1400px) {
            .app-container {
                max-width: 90%; /* 在较小屏幕上增加宽度占比 */
            }
        }
        
        @media (max-width: 1200px) {
            .app-container {
                max-width: 95%; /* 在中等屏幕上增加宽度占比 */
            }
            
            .content-wrapper.three-column {
                gap: 20px; /* 减小间距 */
            }
        }
        
        @media (max-width: 992px) {
            .content-wrapper.three-column {
                flex-wrap: wrap;
                gap: 20px;
            }
            
            .content-wrapper.three-column > .sidebar,
            .content-wrapper.three-column > .simulation-area,
            .content-wrapper.three-column > .chart-area {
                flex: 1 1 100%;
                max-width: none;
            }
            
            .simulation-area {
                min-height: 550px; /* 在中等屏幕上增加最小高度 */
                order: 1; /* 确保模拟区域在顶部 */
            }
            
            .canvas-wrapper {
                min-height: 520px !important; /* 在中等屏幕上增加最小高度 */
                aspect-ratio: 1 / 1; /* 保持1:1的宽高比 */
            }
            
            .chart-area {
                order: 2; /* 图表区域放在第二位 */
            }
            
            .sidebar {
                order: 3; /* 侧边栏放在最后 */
            }
        }
        
        @media (max-width: 768px) {
            .app-container {
                max-width: 98%; /* 在小屏幕上几乎占满 */
                padding: calc(var(--section-gap) / 1.5); /* 减小内边距 */
            }
            
            .content-wrapper.three-column {
                gap: 16px;
            }
            
            .simulation-area {
                min-height: 500px; /* 在小屏幕上调整高度 */
            }
            
            .canvas-wrapper {
                min-height: 450px !important; /* 在小屏幕上调整高度 */
                aspect-ratio: 1 / 1; /* 保持1:1的宽高比 */
                margin: 15px 0;
            }
            
            .setting-item {
                flex-direction: column;
                align-items: flex-start;
                padding: 18px;
                gap: 15px;
            }
            
            .setting-item span {
                margin-bottom: 5px;
                margin-right: 0;
            }
            
            .slider-container {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            input[type="range"] {
                width: 100%;
            }
            
            .slider-value {
                align-self: flex-start;
            }
        }
        
        @media (max-width: 576px) {
            .app-container {
                padding: calc(var(--section-gap) / 2);
            }
            
            .content-wrapper.three-column {
                gap: 12px;
            }
            
            .simulation-area {
                min-height: 450px; /* 在超小屏幕上调整高度 */
            }
            
            .canvas-wrapper {
                min-height: 380px !important; /* 在超小屏幕上调整高度 */
                margin: 10px 0;
            }
            
            .data-grid {
                grid-template-columns: 1fr;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            .btn {
                margin-bottom: 10px;
                width: 100%;
            }
            
            .app-header.glass {
                flex-direction: column;
                text-align: center;
                padding: 15px;
            }
            
            .logo-area {
                margin-bottom: 15px;
            }
        }

        /* 增强主题切换按钮 */
        .theme-toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(var(--primary-color-rgb), 0.1);
            padding: 8px 15px;
            border-radius: 30px;
            border: 1px solid rgba(var(--primary-color-rgb), 0.2);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }

        .theme-toggle-container:hover {
            background: rgba(var(--primary-color-rgb), 0.15);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .theme-toggle-container i {
            font-size: 1.3rem;
            color: var(--text-color);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
        }

        .theme-toggle-container i.ri-sun-line {
            color: #f59e0b; /* 太阳图标使用暖色调 */
        }

        .theme-toggle-container i.ri-moon-line {
            color: #818cf8; /* 月亮图标使用冷色调 */
        }

        /* 增强π符号样式 */
        .logo-icon {
            position: relative;
            width: clamp(50px, 8vw, 70px); /* 响应式大小 */
            height: clamp(50px, 8vw, 70px); /* 响应式大小 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.2));
            box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.3);
            animation: rotate3D 10s infinite linear;
            transform-style: preserve-3d;
            perspective: 1000px;
            margin-right: 15px;
        }

        .logo-icon .pi-symbol {
            font-size: clamp(28px, 4vw, 38px); /* 响应式字体大小 */
            font-weight: bold;
            color: var(--text-accent);
            line-height: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
            z-index: 2;
        }

        .logo-icon .orbit {
            position: absolute;
            width: clamp(40px, 7vw, 60px); /* 响应式大小 */
            height: clamp(40px, 7vw, 60px); /* 响应式大小 */
            border-radius: 50%;
            border: 1px solid var(--current-orbit-color, rgba(var(--primary-color-rgb), 0.6));
            animation: rotateSlow 8s infinite linear;
        }

        .logo-icon .point {
            position: absolute;
            width: clamp(4px, 0.8vw, 6px); /* 响应式大小 */
            height: clamp(4px, 0.8vw, 6px); /* 响应式大小 */
            background-color: var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--primary-color);
        }

        .logo-icon .point:nth-child(1) {
            top: 0;
            left: calc(50% - clamp(4px, 0.8vw, 6px) / 2);
            animation: pulsate 2s infinite ease-in-out;
        }

        .logo-icon .point:nth-child(2) {
            bottom: 0;
            left: calc(50% - clamp(4px, 0.8vw, 6px) / 2);
            animation: pulsate 2s infinite ease-in-out 0.6s;
        }

        .logo-icon .point:nth-child(3) {
            top: calc(50% - clamp(4px, 0.8vw, 6px) / 2);
            right: 0;
            animation: pulsate 2s infinite ease-in-out 1.2s;
        }

        @keyframes rotate3D {
            0% { transform: rotateY(0) rotateX(0); }
            50% { transform: rotateY(180deg) rotateX(10deg); }
            100% { transform: rotateY(360deg) rotateX(0); }
        }

        @keyframes rotateSlow {
            0% { transform: rotate(0); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulsate {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.5); opacity: 1; }
        }

        /* 强化玻璃态效果 */
        .glass { 
            background: var(--glass-background) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s ease-out;
        }
        
        .app-header.glass {
            padding: clamp(15px, 2vw, 30px); /* 响应式内边距 */
            margin-bottom: 20px;
            border-radius: var(--border-radius-lg, 16px) !important;
        }
        
        .app-footer.glass {
            margin-top: 20px;
            border-radius: var(--border-radius-lg, 16px) !important;
            padding: clamp(10px, 1.5vw, 20px); /* 响应式内边距 */
        }
        
        .glass:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg), 0 0 20px rgba(var(--primary-color-rgb), 0.2) !important;
        }
        
        /* 增强卡片效果 */
        .card {
            border-radius: var(--border-radius, 10px);
            overflow: hidden;
        }
        
        .data-card.highlight.glow {
            background: var(--glass-background) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: var(--glass-border) !important;
            box-shadow: var(--highlight-glow) !important;
        }
        
        .data-item {
            background: var(--glass-background);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: var(--glass-border);
            transition: all 0.3s ease;
        }
        
        .data-item:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: var(--shadow-lg);
            background-color: rgba(var(--primary-color-rgb), 0.05);
        }
        
        /* 按钮增强 */
        .btn { 
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out, background 0.2s ease-out;
            will-change: transform, box-shadow;
            position: relative;
            overflow: hidden;
        }
        
        .btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: var(--shadow-lg);
        }
        
        .btn:active {
            transform: translateY(-2px) scale(0.98);
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .btn:hover::after {
            opacity: 1;
        }
        
        .btn.primary {
            background: var(--primary-gradient);
            color: white;
            animation: softPulse 2s infinite ease-in-out;
        }
        
        /* 导航标签增强 */
        .nav-tab {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .nav-tab:hover {
            transform: translateX(3px);
            background-color: rgba(var(--primary-color-rgb), 0.12);
        }
        
        .nav-tab.active {
            background: rgba(var(--primary-color-rgb), 0.15);
            color: var(--primary-color);
            border-left: 3px solid var(--primary-color);
            font-weight: 600;
        }
        
        /* 动画延迟类 */
        .animate__delay-02s { animation-delay: 0.2s; }
        .animate__delay-04s { animation-delay: 0.4s; }
        .animate__delay-06s { animation-delay: 0.6s; }
        .animate__delay-08s { animation-delay: 0.8s; }
        .animate__delay-1s { animation-delay: 1s; }
        
        /* 确保动画可见 */
        .animate__animated {
            visibility: visible !important;
        }
        
        /* 精确度条增强 */
        .accuracy-meter {
            background: var(--glass-background);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: var(--glass-border);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-top: 20px;
            box-shadow: var(--shadow-sm);
        }
        
        .accuracy-bar-container {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }
        
        .accuracy-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(to right, var(--danger-color), var(--warning-color), var(--success-color));
            border-radius: 5px;
            transition: width 0.5s ease-out;
        }
        
        /* 统计面板增强 */
        .statistics-panel {
            background: var(--glass-background) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
            padding: var(--card-padding);
            border-radius: var(--border-radius);
        }
        
        /* 图例项增强 */
        .legend-item {
            background: var(--glass-background);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: var(--glass-border);
            padding: 8px 16px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        
        .legend-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        
        /* 无障碍焦点样式 */
        *:focus-visible {
            outline: 3px solid var(--primary-light, #818cf8);
            outline-offset: 2px;
            box-shadow: 0 0 0 5px rgba(var(--primary-color-rgb), 0.3);
        }
        
        button:focus-visible {
            outline: 2px solid var(--primary-dark, #4f46e5);
            outline-offset: 1px;
        }

        /* 添加成员信息样式 */
        .team-info {
            font-size: 0.95rem;
            color: var(--text-secondary);
            background: rgba(var(--primary-color-rgb), 0.1);
            padding: 5px 12px;
            border-radius: 20px;
            margin-left: 15px;
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(var(--primary-color-rgb), 0.15);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }
        
        .team-info:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            background: rgba(var(--primary-color-rgb), 0.15);
        }
        
        .team-info i {
            margin-right: 6px;
            color: var(--primary-color);
            font-size: 1.1rem;
        }
        
        /* 修复左侧按钮对齐问题 */
        .btn-group {
            display: flex;
            gap: 10px;
            width: 100%;
        }
        
        .btn-group .btn {
            flex: 1;
            text-align: center;
            justify-content: center;
            padding: 10px 8px;
            white-space: nowrap;
        }
        
        .control-item {
            width: 100%;
        }
        
        /* 增强原理部分文字显示 */
        .theory-content {
            padding: 15px;
        }
        
        .theory-content p {
            color: var(--text-color);
            margin-bottom: 16px;
            font-size: 1.05rem;
            line-height: 1.7;
            text-shadow: 0 1px 2px rgba(0,0,0,0.05);
            position: relative;
            padding-left: 16px;
            border-left: 3px solid rgba(var(--primary-color-rgb), 0.3);
        }
        
        .theory-content p:hover {
            border-left-color: var(--primary-color);
        }
        
        .theory-content ul {
            padding-left: 20px;
            margin: 15px 0;
            list-style-type: none;
        }
        
        .theory-content ul li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 28px;
        }
        
        .theory-content ul li::before {
            content: "•";
            color: var(--primary-color);
            font-size: 1.5rem;
            position: absolute;
            left: 0;
            top: -0.2rem;
        }
        
        .theory-content .formula {
            background: rgba(var(--primary-color-rgb), 0.05);
            padding: 12px 15px;
            border-radius: var(--border-radius);
            margin: 15px 0;
            text-align: center;
            font-family: 'Times New Roman', serif;
            font-size: 1.15rem;
            border: 1px solid rgba(var(--primary-color-rgb), 0.1);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }
        
        .theory-content .formula:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            background: rgba(var(--primary-color-rgb), 0.08);
        }
        
        .theory-content .highlight-text {
            color: var(--accent-color);
            font-weight: 600;
        }
        
        .theory-content .note {
            background: rgba(var(--accent-color-rgb), 0.05);
            padding: 12px 15px;
            border-radius: var(--border-radius);
            margin: 15px 0;
            border-left: 4px solid var(--accent-color);
            font-style: italic;
        }

        /* 添加滚动条美化样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(var(--primary-color-rgb), 0.05);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(var(--primary-color-rgb), 0.3);
            border-radius: 4px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--primary-color-rgb), 0.5);
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        /* 确保图表卡片显示正确 */
        .chart-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .chart-container {
            flex: 1;
            min-height: 250px;
            position: relative;
            overflow: hidden;
        }

        /* 修复玻璃效果 */
        .glass {
            background: var(--glass-background) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
        }
        
        /* 左侧卡片内容内边距优化 */
        .sidebar-content {
            padding: 5px;
        }
        
        .sidebar-section {
            padding: 10px;
        }
        
        .control-panel {
            padding: 10px;
        }
        
        .control-group {
            padding: 5px 10px 15px 10px;
        }
        
        .control-group h3 {
            padding: 0 5px 10px 5px;
        }
        
        .theory-content {
            padding: 15px;
        }
        
        .theory-content p, 
        .theory-content ul li {
            padding: 0 5px;
        }
        
        .data-summary {
            padding: 10px 5px;
        }

        /* 新增的统一数据长条卡片样式 */
        .unified-data-strip {
            margin: 20px auto !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 12px 8px !important;
            border-radius: var(--border-radius-lg, 16px) !important;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            background: var(--glass-background) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
        }
        
        .unified-data-strip:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg), 0 0 20px rgba(var(--primary-color-rgb), 0.2) !important;
        }
        
        .unified-items-container {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            flex-wrap: nowrap !important;
            gap: 5px !important;
        }
        
        .unified-item {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            flex: 1 !important;
            padding: 5px 3px !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
            position: relative !important;
        }
        
        .unified-item:not(:last-child):after {
            content: '';
            position: absolute;
            right: -8px;
            top: 25%;
            height: 50%;
            width: 1px;
            background: rgba(var(--primary-color-rgb), 0.2);
        }
        
        .unified-item:hover {
            background: rgba(var(--primary-color-rgb), 0.05);
            transform: translateY(-3px);
        }
        
        /* 特殊样式 - π值高亮 */
        .unified-item.highlight {
            flex: 1.5;
        }
        
        .unified-item.highlight i {
            font-size: 1.8rem;
            color: var(--primary-color);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
            animation: pulse 2s infinite ease-in-out;
            margin-bottom: 3px;
        }
        
        .unified-item.highlight .unified-value {
            font-size: 1.6rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            text-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .unified-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
            margin-bottom: 4px;
            text-align: center;
        }
        
        .unified-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-color);
            text-align: center;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* 精确度条特殊样式 */
        .unified-item.accuracy {
            flex: 3.5 !important;
        }
        
        .accuracy-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .accuracy-bar-container {
            height: 8px;
            width: 100%;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 5px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .accuracy-bar {
            height: 100%;
            background: linear-gradient(to right, var(--danger-color), var(--warning-color), var(--success-color));
            border-radius: 4px;
            transition: width 0.5s ease-out;
        }
        
        .accuracy-value {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary-color);
            align-self: flex-end;
        }
        
        /* 响应式布局调整 */
        @media (max-width: 1200px) {
            .unified-items-container {
                flex-wrap: wrap;
            }
            
            .unified-item {
                flex: 1 1 30%;
                margin-bottom: 8px;
            }
            
            .unified-item.highlight {
                flex: 1 1 30%;
                order: -1;
            }
            
            .unified-item.accuracy {
                flex: 1 1 100%;
                order: 999;
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid rgba(var(--primary-color-rgb), 0.1);
            }
            
            .unified-item:not(:last-child):after {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
             .unified-data-strip {
                 max-width: 100%;
                 padding: 15px 8px;
             }
            
            .unified-item {
                flex: 1 1 45%;
            }
            
            .unified-item.highlight {
                flex: 1 1 100%;
            }
        }
        
        @media (max-width: 576px) {
            .unified-data-strip {
                padding: 12px 8px;
            }
            
            .unified-items-container {
                flex-direction: column;
                gap: 5px;
            }
            
            .unified-item {
                flex: 1 1 100%;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                border-bottom: 1px dashed rgba(var(--primary-color-rgb), 0.1);
                padding: 8px 5px;
            }
            
            .unified-item:last-child {
                border-bottom: none;
            }
            
            .unified-item.highlight {
                background: rgba(var(--primary-color-rgb), 0.05);
                padding: 10px;
                margin-bottom: 5px;
                flex-direction: column;
                align-items: center;
            }
            
            .unified-label {
                margin-bottom: 0;
                text-align: left;
            }
            
            .unified-value {
                font-size: 1.1rem;
                text-align: right;
            }
            
            .unified-item.highlight .unified-label {
                text-align: center;
                margin-bottom: 5px;
            }
            
            .unified-item.accuracy {
                flex-direction: column;
                align-items: stretch;
            }
            
            .accuracy-container {
                margin-top: 5px;
            }
        }

        /* 🎯 3D视图页面样式优化 */
        .visualization-3d-main {
            display: grid;
            grid-template-columns: 380px 1fr;
            grid-template-rows: 1fr auto;
            gap: 25px;
            height: calc(100vh - 160px);
            padding: 25px;
            align-items: start;
        }

        /* 3D控制面板优化 - 更宽敞舒展 */
        .controls-3d-panel {
            grid-column: 1;
            grid-row: 1;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px 25px;
            height: fit-content;
            max-height: calc(100vh - 320px);
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .panel-section {
            margin-bottom: 35px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

        .panel-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .panel-section h3 {
            font-size: 1.1rem;
            color: var(--text-color);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .control-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .control-btn-3d {
            padding: 15px 20px;
            border: none;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
        }

        .control-btn-3d.primary {
            background: linear-gradient(135deg, var(--primary-color), #4F46E5);
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }

        .control-btn-3d.secondary {
            background: rgba(107, 114, 128, 0.1);
            color: var(--text-color);
            border: 1px solid rgba(107, 114, 128, 0.2);
        }

        .control-btn-3d.accent {
            background: linear-gradient(135deg, var(--accent-color), #10B981);
            color: white;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        .control-btn-3d:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        /* 视图控制区域 */
        .view-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .view-preset {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 10px;
            border-radius: 10px;
            background: rgba(243, 244, 246, 0.6);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .view-preset.active {
            background: rgba(99, 102, 241, 0.1);
            border-color: var(--primary-color);
        }

        .view-preset:hover {
            background: rgba(99, 102, 241, 0.05);
            transform: translateY(-1px);
        }

        .preset-icon {
            font-size: 1.2rem;
            margin-bottom: 8px;
        }

        .view-preset span {
            font-size: 0.85rem;
            color: var(--text-secondary);
            text-align: center;
        }

        /* 参数调节区域 */
        .parameter-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .parameter-row label {
            font-size: 0.95rem;
            color: var(--text-color);
            font-weight: 500;
            min-width: 80px;
        }

        .param-control {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            max-width: 180px;
        }

        .range-3d {
            flex: 1;
            height: 6px;
            background: #E5E7EB;
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
        }

        .range-3d::-webkit-slider-thumb {
            appearance: none;
            width: 18px;
            height: 18px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
        }

        .param-control span {
            font-size: 0.9rem;
            color: var(--text-secondary);
            min-width: 40px;
            text-align: right;
            font-weight: 500;
        }

        /* 开关选项 */
        .toggle-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .toggle-label {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            font-size: 0.95rem;
            color: var(--text-color);
        }

        /* 主3D场景区域 - 更大更清晰 */
        .scene-3d-container {
            grid-column: 2;
            grid-row: 1;
            background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            height: calc(100vh - 320px);
            max-height: 700px;
            aspect-ratio: 16/10;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .scene-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .threejs-container {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
        }

        /* 3D统计数据覆盖层优化 - 移到底部，更紧凑 */
        .stats-overlay-3d {
            position: absolute;
            bottom: 10px;
            left: 20px;
            right: 20px;
            z-index: 10;
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .stat-3d-group {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .stat-3d-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: rgba(30, 41, 59, 0.9);
            backdrop-filter: blur(4px);
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 85px;
            flex: 0 0 auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 28px;
        }

        .stat-icon-3d {
            font-size: 0.75rem;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            background: rgba(99, 102, 241, 0.3);
            flex-shrink: 0;
        }

        .stat-data {
            display: flex;
            flex-direction: column;
            gap: 0;
            min-width: 0;
            line-height: 1;
        }

        .stat-value {
            font-size: 0.7rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 1px;
        }

        .stat-label {
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1;
            font-weight: 400;
            white-space: nowrap;
        }

        /* 性能信息 */
        .performance-info {
            display: flex;
            gap: 4px;
            margin-left: 6px;
        }

        .fps-counter, .render-info {
            padding: 3px 6px;
            background: rgba(30, 41, 59, 0.85);
            backdrop-filter: blur(4px);
            border-radius: 4px;
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
            white-space: nowrap;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 20px;
            display: flex;
            align-items: center;
        }

        /* 3D信息面板 - 修复字体模糊和高度问题 */
        .info-panel-3d {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
        }

        .info-toggle {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(6px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.4);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 0.8rem;
        }

        .info-toggle:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 1);
        }

        .info-content {
            position: absolute;
            top: 40px;
            right: 0;
            width: 280px;
            max-height: 350px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(6px);
            border-radius: 12px;
            padding: 14px 16px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.4);
            display: none;
            overflow-y: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .info-content.active {
            display: block;
            animation: fadeInUp 0.3s ease;
        }

        .info-content h4 {
            margin-bottom: 10px;
            color: var(--text-color);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.3;
        }

        .info-content p {
            margin-bottom: 10px;
            color: var(--text-secondary);
            font-size: 0.75rem;
            line-height: 1.4;
            font-weight: 400;
        }

        .formula-3d {
            background: rgba(99, 102, 241, 0.06);
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 0.7rem;
            margin-bottom: 10px;
            border-left: 2px solid var(--primary-color);
            line-height: 1.4;
            font-weight: 400;
        }

        .controls-hint {
            background: rgba(16, 185, 129, 0.06);
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 0.7rem;
            border-left: 2px solid var(--accent-color);
            line-height: 1.4;
            font-weight: 400;
        }

        /* 底部控制区域 */
        .bottom-controls {
            grid-column: 1 / 3;
            grid-row: 2;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 25px;
            align-items: start;
        }

        /* 底部左侧保留区域 */
        .bottom-left-section {
            /* 预留给视图控制或其他信息 */
        }

        /* 可视化模式选择器 - 底部右侧 */
        .visualization-modes {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            padding: 20px 25px;
            height: fit-content;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 600px;
            width: fit-content;
        }

        .visualization-modes h3 {
            font-size: 0.9rem;
            color: var(--text-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            text-align: center;
            justify-content: center;
        }

        .mode-grid {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: nowrap;
        }

        .mode-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center;
            gap: 6px;
            padding: 12px 16px;
            border-radius: 10px;
            background: rgba(243, 244, 246, 0.6);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            width: 130px;
            flex: 0 0 130px;
        }

        .mode-card.active {
            background: rgba(99, 102, 241, 0.1);
            border-color: var(--primary-color);
        }

        .mode-card:hover {
            background: rgba(99, 102, 241, 0.05);
            transform: translateY(-2px);
        }

        .mode-preview {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(99, 102, 241, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            margin-bottom: 4px;
        }

        .mode-info {
            text-align: center;
        }

        .mode-info h4 {
            font-size: 0.85rem;
            color: var(--text-color);
            margin-bottom: 3px;
            font-weight: 600;
            line-height: 1.2;
        }

        .mode-info p {
            font-size: 0.7rem;
            color: var(--text-secondary);
            line-height: 1.2;
        }

        /* 响应式优化 */
        @media (max-width: 1400px) {
            .visualization-3d-main {
                grid-template-columns: 300px 1fr;
                gap: 20px;
            }
            
            .controls-3d-panel {
                padding: 25px 20px;
            }

            .scene-3d-container {
                height: calc(100vh - 340px);
            }

            .bottom-controls {
                gap: 20px;
            }

            .visualization-modes {
                padding: 15px 20px;
                min-width: 520px;
            }

            .mode-grid {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px;
                flex-wrap: nowrap;
            }

            .mode-card {
                width: 115px;
                flex: 0 0 115px;
                padding: 10px 12px;
            }
        }

        @media (max-width: 1200px) {
            .visualization-3d-main {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                height: auto;
                gap: 20px;
            }
            
            .scene-3d-container {
                height: 500px;
                max-height: 500px;
                aspect-ratio: 16/9;
                grid-column: 1;
                grid-row: 2;
            }
            
            .controls-3d-panel {
                grid-column: 1;
                grid-row: 1;
                max-height: none;
            }
            
            .bottom-controls {
                grid-column: 1;
                grid-row: 3;
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .visualization-modes {
                min-width: auto;
                width: 100%;
            }

            .mode-grid {
                display: flex !important;
                flex-direction: row !important;
                gap: 12px;
                justify-content: center;
                flex-wrap: nowrap;
            }

            .mode-card {
                width: 110px;
                flex: 0 0 110px;
                padding: 10px 12px;
            }
        }

        @media (max-width: 768px) {
            .visualization-3d-main {
                padding: 15px;
                gap: 15px;
            }

            .scene-3d-container {
                height: 400px;
                max-height: 400px;
            }

            .bottom-controls {
                gap: 15px;
            }

            .visualization-modes {
                padding: 15px;
                min-width: auto;
            }

            .mode-grid {
                display: flex !important;
                flex-direction: row !important;
                gap: 8px;
                justify-content: center;
                flex-wrap: nowrap;
            }

            .mode-card {
                width: 70px;
                flex: 0 0 70px;
                padding: 8px 6px;
                gap: 4px;
            }

            .mode-info h4 {
                font-size: 0.7rem;
            }

            .mode-info p {
                font-size: 0.6rem;
            }

            .mode-preview {
                width: 28px;
                height: 28px;
                font-size: 0.9rem;
            }

            .visualization-modes h3 {
                font-size: 0.85rem;
                margin-bottom: 12px;
            }

            /* 移动端统计信息优化 */
            .stat-3d-item {
                min-width: 75px;
                padding: 3px 6px;
                gap: 3px;
                height: 24px;
            }

            .stat-icon-3d {
                width: 14px;
                height: 14px;
                font-size: 0.7rem;
            }

            .stat-value {
                font-size: 0.65rem;
            }

            .stat-label {
                font-size: 0.55rem;
            }

            .performance-info {
                margin-left: 4px;
                gap: 3px;
            }

            .fps-counter, .render-info {
                padding: 2px 4px;
                font-size: 0.55rem;
                height: 18px;
            }

            .info-toggle {
                width: 28px;
                height: 28px;
                font-size: 0.7rem;
            }

            .info-content {
                width: 260px;
                max-height: 300px;
                padding: 12px;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    
    <!-- Three.js 3D库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- Three.js 轨道控制器 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
    <!-- Three.js 统计监控 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.min.js"></script>
    
</head>
<body>
    <!-- 全局导航栏 -->
    <nav class="global-nav glass animate__animated animate__fadeInDown">
        <div class="nav-container">
            <div class="nav-brand">
                <div class="logo-icon rotating-3d">
                    <span class="pi-symbol" aria-hidden="true">π</span>
                    <div class="orbit">
                        <div class="point"></div>
                        <div class="point"></div>
                        <div class="point"></div>
                    </div>
                </div>
                <span class="brand-text">圆方之间π</span>
            </div>

            <div class="nav-menu">
                <button class="nav-item active" data-page="welcome">
                    <i class="ri-home-line"></i>
                    <span>首页</span>
                </button>
                <button class="nav-item" data-page="tutorial">
                    <i class="ri-book-open-line"></i>
                    <span>教学</span>
                </button>
                <button class="nav-item" data-page="simulation">
                    <i class="ri-radar-line"></i>
                    <span>模拟</span>
                </button>
                <button class="nav-item" data-page="3d-visualization">
                    <i class="ri-cube-line"></i>
                    <span>3D视图</span>
                </button>
                <button class="nav-item" data-page="comparison">
                    <i class="ri-bar-chart-box-line"></i>
                    <span>算法对比</span>
                </button>
                <button class="nav-item" data-page="analysis">
                    <i class="ri-line-chart-line"></i>
                    <span>数据分析</span>
                </button>
                <button class="nav-item" data-page="achievements">
                    <i class="ri-trophy-line"></i>
                    <span>成就中心</span>
                </button>
            </div>

            <div class="nav-controls">
                <div class="theme-toggle-container">
                    <i class="ri-sun-line" aria-hidden="true"></i>
                    <label class="switch">
                        <input type="checkbox" id="themeToggle" aria-label="Toggle color theme">
                        <span class="switch-slider"></span>
                    </label>
                    <i class="ri-moon-line" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 🚀 专业启动屏幕 -->
    <div class="championship-loader" id="championshipLoader">
        <div class="loader-background">
            <div class="mathematical-grid"></div>
            <div class="floating-equations">
                <div class="equation">π = 4∫₀¹√(1-x²)dx</div>
                <div class="equation">lim(n→∞) 4∑ₖ₌₁ⁿ 1/(2k-1)(-1)^(k+1)</div>
                <div class="equation">E[X] = ∫ x f(x)dx</div>
            </div>
        </div>
        
        <div class="loader-content">
            <div class="championship-logo">
                <div class="logo-animation">
                    <div class="pi-ring outer"></div>
                    <div class="pi-ring middle"></div>
                    <div class="pi-ring inner"></div>
                    <div class="pi-symbol-loader">π</div>
                </div>
                <div class="logo-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
            </div>
            
            <div class="championship-title">
                <div class="title-with-icon">
                    <i class="ri-cpu-line title-icon"></i>
                    <div class="title-text">
                        <h1>Between Circle & Square π Engine</h1>
                        <p class="championship-subtitle">圆方之间π仿真平台</p>
                    </div>
                </div>
            </div>
            
            <div class="loading-system">
                <div class="loading-progress">
                    <div class="progress-bar-championship">
                        <div class="progress-fill-championship" id="championshipProgress"></div>
                        <div class="progress-glow"></div>
                    </div>
                    <div class="progress-percentage" id="loadingPercentage">0%</div>
                </div>
                
                <div class="loading-stages">
                    <div class="stage-item active" data-stage="1">
                        <i class="ri-cpu-line"></i>
                        <span>初始化算法引擎</span>
                        <div class="stage-check">✓</div>
                    </div>
                    <div class="stage-item" data-stage="2">
                        <i class="ri-cube-line"></i>
                        <span>加载3D渲染器</span>
                        <div class="stage-check">✓</div>
                    </div>
                    <div class="stage-item" data-stage="3">
                        <i class="ri-database-line"></i>
                        <span>配置数据系统</span>
                        <div class="stage-check">✓</div>
                    </div>
                    <div class="stage-item" data-stage="4">
                        <i class="ri-shield-check-line"></i>
                        <span>系统就绪</span>
                        <div class="stage-check">✓</div>
                    </div>
                </div>
            </div>
            
            <div class="system-info">
                <div class="info-item">
                    <span class="info-label">版本:</span>
                    <span class="info-value">v2.0 Championship</span>
                </div>
                <div class="info-item">
                    <span class="info-label">构建:</span>
                    <span class="info-value">2025.9.28</span>
                </div>
                <div class="info-item">
                    <span class="info-label">引擎:</span>
                    <span class="info-value">MonteCarlo Core</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 📊 实时性能监控面板 -->
    <div class="performance-monitor-panel" id="performancePanel">
        <div class="monitor-toggle" id="monitorToggle">
            <i class="ri-dashboard-line"></i>
        </div>
        
        <div class="monitor-content">
            <div class="monitor-header">
                <h3>性能监控</h3>
                <div class="monitor-controls">
                    <button class="monitor-btn" id="resetMonitor">重置</button>
                    <button class="monitor-btn" id="exportMetrics">导出</button>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card cpu">
                    <div class="metric-icon">⚡</div>
                    <div class="metric-info">
                        <span class="metric-label">CPU使用率</span>
                        <span class="metric-value" id="cpuMetric">15%</span>
                    </div>
                    <div class="metric-chart">
                        <canvas id="cpuChart" width="60" height="30"></canvas>
                    </div>
                </div>
                
                <div class="metric-card memory">
                    <div class="metric-icon">💾</div>
                    <div class="metric-info">
                        <span class="metric-label">内存占用</span>
                        <span class="metric-value" id="memoryMetric">124MB</span>
                    </div>
                    <div class="metric-chart">
                        <canvas id="memoryChart" width="60" height="30"></canvas>
                    </div>
                </div>
                
                <div class="metric-card fps">
                    <div class="metric-icon">🎯</div>
                    <div class="metric-info">
                        <span class="metric-label">渲染帧率</span>
                        <span class="metric-value" id="fpsMetric">60 FPS</span>
                    </div>
                    <div class="metric-chart">
                        <canvas id="fpsChart" width="60" height="30"></canvas>
                    </div>
                </div>
                
                <div class="metric-card network">
                    <div class="metric-icon">🌐</div>
                    <div class="metric-info">
                        <span class="metric-label">响应时间</span>
                        <span class="metric-value" id="networkMetric">12ms</span>
                    </div>
                    <div class="metric-chart">
                        <canvas id="networkChart" width="60" height="30"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="advanced-metrics">
                <div class="advanced-metric">
                    <span class="metric-name">算法效率:</span>
                    <div class="efficiency-bar">
                        <div class="efficiency-fill" style="width: 94%"></div>
                    </div>
                    <span class="metric-rating">A+</span>
                </div>
                
                <div class="advanced-metric">
                    <span class="metric-name">计算精度:</span>
                    <div class="precision-indicator">
                        <div class="precision-dot active"></div>
                        <div class="precision-dot active"></div>
                        <div class="precision-dot active"></div>
                        <div class="precision-dot active"></div>
                        <div class="precision-dot"></div>
                    </div>
                    <span class="metric-rating">99.87%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面容器 -->
    <div class="app-container">
        <!-- 第一层：欢迎页面 -->
        <div class="page-container active" id="welcome-page">
            <div class="welcome-hero">
                <div class="particles-bg" id="particles-js"></div>
                <div class="hero-content animate__animated animate__fadeInUp">
                    <div class="hero-logo">
                        <div class="mega-pi-symbol">π</div>
                        <div class="hero-orbit">
                            <div class="orbit-ring"></div>
                            <div class="orbit-ring"></div>
                            <div class="orbit-ring"></div>
                        </div>
                    </div>
                    <h1 class="hero-title gradient-text">圆方之间π</h1>
                    <p class="hero-description">在几何的诗意中探索π值，于随机与确定间寻找数学之美</p>
                    <div class="hero-actions">
                        <button class="btn-hero primary" data-navigate="simulation">
                            <i class="ri-play-circle-line"></i>
                            <span>开始探索</span>
                        </button>
                        <button class="btn-hero secondary" data-navigate="analysis">
                            <i class="ri-bar-chart-2-line"></i>
                            <span>查看分析</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="welcome-features">
                <div class="feature-grid">
                    <div class="feature-card animate__animated animate__fadeInLeft">
                        <div class="feature-icon">
                            <i class="ri-eye-line"></i>
                        </div>
                        <h3>实时可视化</h3>
                        <p>直观展示随机点的生成过程和π值的逐步逼近</p>
                    </div>
                    <div class="feature-card animate__animated animate__fadeInUp animate__delay-02s">
                        <div class="feature-icon">
                            <i class="ri-settings-3-line"></i>
                        </div>
                        <h3>交互控制</h3>
                        <p>灵活调整模拟参数，体验不同的计算策略</p>
                    </div>
                    <div class="feature-card animate__animated animate__fadeInRight animate__delay-04s">
                        <div class="feature-icon">
                            <i class="ri-line-chart-line"></i>
                        </div>
                        <h3>深度分析</h3>
                        <p>多维度数据分析，洞察算法的收敛特性</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二层：主模拟页面 -->
        <div class="page-container" id="simulation-page">
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <h1 class="gradient-text">蒙特卡罗模拟</h1>
                    <p class="page-description">在圆方之间投撒随机之点，于几何边界探寻π的真谛</p>
                    <div class="math-formula">
                        <span class="formula-text">π ≈ 4 × </span>
                        <span class="formula-fraction">
                            <span class="numerator">圆内点数</span>
                            <span class="denominator">总点数</span>
                        </span>
                    </div>
                </div>
                <div class="page-actions">
                    <button class="btn small" data-navigate="analysis">
                        <i class="ri-bar-chart-line"></i>
                        <span>查看分析</span>
                    </button>
                </div>
            </header>

            <main class="content-wrapper three-column">
            <!-- 左侧控制面板 -->
            <aside class="sidebar glass animate__animated animate__fadeInLeft animate__delay-02s">
                <nav class="sidebar-nav">
                    <div class="nav-tab active" data-target="simulation">
                        <i class="ri-radar-line"></i>
                        <span>模拟</span>
                    </div>
                    <div class="nav-tab" data-target="theory">
                        <i class="ri-book-open-line"></i>
                        <span>原理</span>
                    </div>
                    <div class="nav-tab" data-target="settings">
                        <i class="ri-settings-line"></i>
                        <span>设置</span>
                    </div>
                </nav>
                
                <div class="sidebar-content">
                    <section class="sidebar-section active" id="simulation-section" role="region" aria-labelledby="simulation-controls-heading">
                        <div class="control-panel">
                            <div class="control-group">
                                <div class="btn-group">
                                    <button id="startBtn" class="btn primary">
                                        <i class="ri-play-fill"></i>
                                        <span>开始</span>
                                    </button>
                                    <button id="pauseBtn" class="btn warning">
                                        <i class="ri-pause-fill"></i>
                                        <span>暂停</span>
                                    </button>
                                    <button id="resetBtn" class="btn danger">
                                        <i class="ri-restart-line"></i>
                                        <span>重置</span>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="control-group">
                                <h3 id="simulation-controls-heading"><i class="ri-speed-line" aria-hidden="true"></i> 模拟速度</h3>
                                <div class="control-item">
                                    <div class="slider-container">
                                        <span class="slider-value" id="speedValue">10</span>
                                        <input type="range" id="speedRange" min="1" max="100" value="10" aria-labelledby="simulation-controls-heading">
                                        <div class="slider-labels">
                                            <span>慢</span>
                                            <span>快</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="control-group">
                                <h3 id="points-iteration-heading"><i class="ri-node-tree" aria-hidden="true"></i> 每次迭代点数</h3>
                                <div class="control-item">
                                    <div class="radio-group">
                                        <label class="radio-btn"><input type="radio" name="pointsPerIteration" id="points1" value="1" checked> <span>1</span></label>
                                        <label class="radio-btn"><input type="radio" name="pointsPerIteration" id="points10" value="10"> <span>10</span></label>
                                        <label class="radio-btn"><input type="radio" name="pointsPerIteration" id="points100" value="100"> <span>100</span></label>
                                        <label class="radio-btn"><input type="radio" name="pointsPerIteration" id="points1000" value="1000"> <span>1000</span></label>
                                    </div>
                                </div>
                            </div>

                            
                        </div>
                    </section>
                    
                    <section class="sidebar-section" id="theory-section" role="region" aria-labelledby="theory-section-heading">
                        <h3 id="theory-section-heading"><i class="ri-book-mark-line" aria-hidden="true"></i> 蒙特卡罗方法原理</h3>
                        <div class="theory-content">
                            <p>蒙特卡罗方法通过<span class="highlight-text">随机采样</span>来近似计算数学问题。</p>
                            <p>在本例中，我们将随机点投入到边长为 2r 的正方形中。正方形内有一个半径为 r 的圆。</p>
                            <div class="formula">
                                正方形面积 = 4r²<br>
                                圆面积 = πr²
                            </div>
                            <p>因此，随机点落在圆内的概率为：</p>
                            <div class="formula">
                                P(圆内) = πr² / 4r² = π/4
                            </div>
                            <ul>
                                <li>当我们生成大量随机点时，落在圆内的点的比例会接近 π/4</li>
                                <li>通过统计圆内点数与总点数的比例，再乘以4，可以估算π的值</li>
                            </ul>
                            <div class="note">
                                随着采样点数量的增加，估算值会越来越接近π的真实值 3.14159...
                            </div>
                        </div>
                    </section>
                    
                    <section class="sidebar-section" id="settings-section" role="region" aria-labelledby="settings-section-heading">
                        <h3 id="settings-section-heading"><i class="ri-settings-3-line" aria-hidden="true"></i> 设置</h3>
                        
                        <!-- 🚀 AI智能助手 -->
                        <div class="ai-assistant-panel">
                            <h4><i class="ri-robot-line"></i> AI智能助手</h4>
                            <div class="ai-prediction">
                                <div class="ai-status">
                                    <span class="ai-indicator"></span>
                                    <span id="aiStatus">分析中...</span>
                                </div>
                                <div class="ai-suggestion" id="aiSuggestion">
                                    建议：尝试增加每次迭代点数至100，可提升收敛速度
                                </div>
                                <div class="ai-prediction-box">
                                    <label>AI预测下个里程碑:</label>
                                    <div class="prediction-display">
                                        <span id="predictedAccuracy">95.2%</span>
                                        <small>约需 <span id="predictedPoints">2500</span> 点</small>
                                    </div>
                                </div>
                                <button class="btn small primary" id="applyAITips">
                                    <i class="ri-magic-line"></i> 应用AI建议
                                </button>
                            </div>
                        </div>
                        
                        <div class="settings-content">
                            <div class="setting-item">
                                <span>显示网格线</span>
                                <div class="switch-container">
                                    <label class="switch">
                                        <input type="checkbox" id="gridToggle" checked aria-label="Toggle grid lines visibility">
                                        <span class="switch-slider"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="setting-item">
                                <span>显示坐标轴</span>
                                <div class="switch-container">
                                    <label class="switch">
                                        <input type="checkbox" id="axesToggle" checked aria-label="Toggle axes visibility">
                                        <span class="switch-slider"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="setting-item">
                                <span id="point-size-label">点大小</span>
                                <div class="slider-container">
                                    <input type="range" id="pointSizeRange" min="1" max="5" value="3" aria-labelledby="point-size-label">
                                    <span class="slider-value" id="pointSizeValue">3</span>
                                    <div class="slider-labels">
                                        <span>小</span>
                                        <span>大</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </aside>

            <!-- 中间模拟区域 -->
            <section class="simulation-area animate__animated animate__fadeInUp animate__delay-04s" aria-labelledby="simulation-area-heading">
                <div class="card simulation-card glass">
                    <div class="card-header">
                        <h2 id="simulation-area-heading"><i class="ri-pie-chart-line" aria-hidden="true"></i> 蒙特卡罗模拟</h2>
                        <div class="legend">
                            <div class="legend-item">
                                <span class="legend-color inside"></span>
                                <span>圆内点</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color outside"></span>
                                <span>圆外点</span>
                            </div>
                        </div>
                    </div>
                    <div class="canvas-wrapper">
                    <div class="canvas-container">
                        <canvas id="simulationCanvas" role="img" aria-label="Monte Carlo Simulation Visualisation"></canvas>
                        <div class="canvas-overlay">
                            <div class="pi-value-overlay">
                                <span>π ≈ </span>
                                <span id="piValueOverlay" class="pi-counter">0</span>
                            </div>
                        </div>
                        <!-- 3D粒子爆炸容器 -->
                        <div id="particle3DContainer" class="particle-3d-container"></div>
                        <!-- 成就提示 -->
                        <div id="achievementPopup" class="achievement-popup">
                            <div class="achievement-content">
                                <i class="ri-trophy-line"></i>
                                <span class="achievement-text">精度突破95%！</span>
                            </div>
                        </div>
                            <div class="particles-container">
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 右侧收敛图区域 -->
            <section class="chart-area animate__animated animate__fadeInRight animate__delay-06s" aria-labelledby="chart-area-heading">
                <div class="card chart-card glass">
                    <div class="card-header">
                        <h2 id="chart-area-heading"><i class="ri-line-chart-line" aria-hidden="true"></i> π值收敛图</h2>
                        <div class="chart-actions">
                            <button class="btn secondary small" id="clearChartBtn">
                                <i class="ri-refresh-line"></i>
                                <span>清除</span>
                            </button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="convergenceCanvas" role="img" aria-label="Pi Estimation Convergence Chart"></canvas>
                        <div class="chart-overlay">
                            <div class="real-pi-line"></div>
                            <div class="real-pi-label">π = 3.14159...</div>
                        </div>
                    </div>
                </div>
                
                <div class="statistics-panel glass" role="region" aria-labelledby="statistics-panel-heading">
                    <h3 id="statistics-panel-heading"><i class="ri-bar-chart-line" aria-hidden="true"></i> 统计信息</h3>
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-label">收敛速度</div>
                            <div class="stats-value" id="convergenceSpeed">-</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">最佳估计值</div>
                            <div class="stats-value" id="bestEstimate">-</div>
                        </div>
                    </div>
                    <div class="stats-note">
                        随着采样点数增加，π值估计会逐渐收敛
                    </div>
                    
                    <!-- 🚀 社交分享功能 -->
                    <div class="share-section">
                        <button class="btn small primary share-btn" id="shareResultBtn">
                            <i class="ri-share-line"></i>
                            <span>分享成果</span>
                        </button>
                        <button class="btn small secondary" id="saveImageBtn">
                            <i class="ri-download-line"></i>
                            <span>保存截图</span>
                        </button>
                    </div>
                    
                    <!-- 🎮 迷你排行榜 -->
                    <div class="leaderboard-mini" id="miniLeaderboard">
                        <h4><i class="ri-trophy-line"></i> 精度排行榜</h4>
                        <div class="leaderboard-entry current-user">
                            <div class="leaderboard-rank">1</div>
                            <div class="leaderboard-name">你</div>
                            <div class="leaderboard-score">99.2%</div>
                        </div>
                        <div class="leaderboard-entry">
                            <div class="leaderboard-rank">2</div>
                            <div class="leaderboard-name">数学大师</div>
                            <div class="leaderboard-score">98.8%</div>
                        </div>
                        <div class="leaderboard-entry">
                            <div class="leaderboard-rank">3</div>
                            <div class="leaderboard-name">π探索者</div>
                            <div class="leaderboard-score">98.1%</div>
                        </div>
                        
                        <div class="badge-collection">
                            <div class="achievement-badge gold" data-tooltip="精度大师 99%+">🏆</div>
                            <div class="achievement-badge silver" data-tooltip="收敛专家 95%+">🥈</div>
                            <div class="achievement-badge bronze" data-tooltip="入门者 90%+">🥉</div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
        <!-- 新增的统一数据长条卡片 -->
<div class="unified-data-strip glass animate__animated animate__fadeInUp animate__delay-1s">
    <div class="unified-items-container">
        <div class="unified-item highlight">
            <i class="ri-pi-line" aria-hidden="true"></i>
            <div class="unified-label">估算的π值</div>
            <div class="unified-value" id="piValue">0</div>
        </div>
        <div class="unified-item">
            <div class="unified-label">总点数</div>
            <div class="unified-value" id="totalPoints">0</div>
        </div>
        <div class="unified-item">
            <div class="unified-label">圆内点数</div>
            <div class="unified-value" id="circlePoints">0</div>
        </div>
        <div class="unified-item">
            <div class="unified-label">圆内点百分比</div>
            <div class="unified-value" id="percentage">0%</div>
        </div>
        <div class="unified-item">
            <div class="unified-label">误差</div>
            <div class="unified-value" id="error">0%</div>
        </div>
        <div class="unified-item accuracy">
            <div class="unified-label">精确度</div>
            <div class="accuracy-container">
                <div class="accuracy-bar-container">
                    <div class="accuracy-bar" id="accuracyBar"></div>
                </div>
                <div class="accuracy-value" id="accuracyValue">0%</div>
            </div>
        </div>
    </div>
</div>
        </div>

        <!-- 第三层：高级分析页面 -->
        <div class="page-container" id="analysis-page">
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <h1 class="gradient-text">高级分析</h1>
                    <p class="page-description">深入圆方世界的统计奥秘，探析π值收敛的数学规律</p>
                    <div class="analysis-formulas">
                        <div class="formula-item">
                            <span class="formula-label">收敛速度:</span>
                            <span class="formula-math">O(1/√n)</span>
                        </div>
                        <div class="formula-item">
                            <span class="formula-label">标准误差:</span>
                            <span class="formula-math">σ/√n</span>
                        </div>
                        <div class="formula-item">
                            <span class="formula-label">置信区间:</span>
                            <span class="formula-math">π̂ ± 1.96σ/√n</span>
                        </div>
                    </div>
                </div>
                <div class="page-actions">
                    <button class="btn small" data-navigate="simulation">
                        <i class="ri-arrow-left-line"></i>
                        <span>返回模拟</span>
                    </button>
                    <button class="btn small primary" id="exportDataBtn">
                        <i class="ri-download-line"></i>
                        <span>导出数据</span>
                    </button>
                </div>
            </header>

            <main class="analysis-content">
                <div class="analysis-grid">
                    <!-- 统计概览卡片 -->
                    <div class="analysis-card stats-overview glass">
                        <div class="card-header">
                            <h2><i class="ri-pie-chart-line"></i>统计概览</h2>
                        </div>
                        <div class="stats-dashboard">
                            <div class="stat-item">
                                <div class="stat-icon"><i class="ri-target-line"></i></div>
                                <div class="stat-content">
                                    <div class="stat-value" id="totalSimulations">0</div>
                                    <div class="stat-label">总模拟次数</div>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon"><i class="ri-award-line"></i></div>
                                <div class="stat-content">
                                    <div class="stat-value" id="bestAccuracy">0%</div>
                                    <div class="stat-label">最佳精确度</div>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon"><i class="ri-time-line"></i></div>
                                <div class="stat-content">
                                    <div class="stat-value" id="avgConvergenceTime">0s</div>
                                    <div class="stat-label">平均收敛时间</div>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon"><i class="ri-flashlight-line"></i></div>
                                <div class="stat-content">
                                    <div class="stat-value" id="convergenceRate">0</div>
                                    <div class="stat-label">收敛速率</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 多维度图表区域 -->
                    <div class="analysis-card chart-multi glass">
                        <div class="card-header">
                            <h2><i class="ri-line-chart-line"></i>收敛分析</h2>
                            <div class="chart-controls">
                                <select id="chartTypeSelect" class="chart-select">
                                    <option value="convergence">收敛曲线</option>
                                    <option value="error">误差分析</option>
                                    <option value="distribution">分布统计</option>
                                    <option value="comparison">对比分析</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="analysisChart"></canvas>
                        </div>
                    </div>

                    <!-- 高级统计分析面板 -->
                    <div class="analysis-card advanced-analytics glass">
                        <div class="card-header">
                            <h2><i class="ri-bar-chart-2-line"></i>高级统计分析</h2>
                            <div class="analytics-controls">
                                <button class="btn small accent" id="exportAnalytics">
                                    <i class="ri-file-chart-line"></i>
                                    <span>导出报告</span>
                                </button>
                            </div>
                        </div>
                        <div class="analytics-grid">
                            <div class="metric-insight">
                                <div class="insight-title">收敛性分析</div>
                                <div class="insight-value" id="convergenceRate">1/√n ≈ 0.032</div>
                                <div class="insight-description">当前收敛速度评估</div>
                            </div>
                            <div class="metric-insight">
                                <div class="insight-title">置信区间</div>
                                <div class="insight-value" id="confidenceInterval">[3.125, 3.158]</div>
                                <div class="insight-description">95%置信水平</div>
                            </div>
                            <div class="metric-insight">
                                <div class="insight-title">标准差</div>
                                <div class="insight-value" id="standardDeviation">0.028</div>
                                <div class="insight-description">误差波动范围</div>
                            </div>
                            <div class="metric-insight">
                                <div class="insight-title">效率评级</div>
                                <div class="insight-value rating-a" id="efficiencyRating">A+</div>
                                <div class="insight-description">算法性能等级</div>
                            </div>
                        </div>
                    </div>

                    <!-- 算法参数调优 -->
                    <div class="analysis-card parameter-tuning glass">
                        <div class="card-header">
                            <h2><i class="ri-settings-4-line"></i>参数调优</h2>
                        </div>
                        <div class="tuning-controls">
                            <div class="tuning-group">
                                <label>批处理大小</label>
                                <div class="slider-container">
                                    <input type="range" id="batchSizeRange" min="1" max="10000" value="100">
                                    <span class="slider-value" id="batchSizeValue">100</span>
                                </div>
                            </div>
                            <div class="tuning-group">
                                <label>采样策略</label>
                                <select id="samplingStrategy" class="strategy-select">
                                    <option value="uniform">均匀随机</option>
                                    <option value="stratified">分层采样</option>
                                    <option value="importance">重要性采样</option>
                                </select>
                            </div>
                            <div class="tuning-group">
                                <label>收敛阈值</label>
                                <div class="slider-container">
                                    <input type="range" id="convergenceThreshold" min="0.001" max="0.1" step="0.001" value="0.01">
                                    <span class="slider-value" id="convergenceThresholdValue">0.01</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 🎓 教学模式页面 - 重新设计版本 -->
        <div class="page-container" id="tutorial-page">
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <div class="title-wrapper">
                        <div class="floating-icon">🧠</div>
                        <h1 class="gradient-text">智能教学系统</h1>
                        <p class="page-description">在圆方几何中领悟π的智慧，体验沉浸式数学之美</p>
                    </div>
                    <div class="progress-indicator">
                        <div class="progress-steps">
                            <div class="step active" data-step="1">原理</div>
                            <div class="step" data-step="2">实践</div>
                            <div class="step" data-step="3">应用</div>
                            <div class="step" data-step="4">历史</div>
                        </div>
                    </div>
                </div>
            </header>

            <main class="page-main tutorial-redesigned">
                <!-- 核心概念区域 -->
                <div class="learning-section concept-section">
                    <div class="section-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">💡</span>
                            核心概念掌握
                        </h2>
                        <div class="difficulty-badge expert">高级</div>
                                </div>
                    
                    <div class="concept-cards-grid">
                        <!-- 数学原理卡片 -->
                        <div class="concept-card mathematical">
                            <div class="card-header">
                                <div class="card-icon">∮</div>
                                <h3>数学原理</h3>
                                <div class="card-status">理论基础</div>
                                            </div>
                            
                            <div class="visual-demonstration">
                                <div class="geometry-container">
                                    <div class="unit-square enhanced">
                                        <div class="inscribed-circle pulsing"></div>
                                        <div class="grid-overlay"></div>
                                        <div class="demo-points-enhanced" id="tutorialPoints"></div>
                                        <div class="coordinate-labels">
                                            <span class="coord-label top-right">(1,1)</span>
                                            <span class="coord-label bottom-left">(-1,-1)</span>
                                        </div>
                                            </div>
                                        </div>
                                
                                <div class="formula-derivation">
                                    <div class="formula-title">推导步骤</div>
                                    <div class="formula-steps-enhanced">
                                        <div class="step-item">
                                            <div class="step-badge">1</div>
                                            <div class="step-formula">
                                                <span class="latex">圆面积 = πr² = π</span>
                                            </div>
                                        </div>
                                        <div class="step-item">
                                            <div class="step-badge">2</div>
                                            <div class="step-formula">
                                                <span class="latex">方形面积 = 2² = 4</span>
                                            </div>
                                        </div>
                                        <div class="step-item">
                                            <div class="step-badge">3</div>
                                            <div class="step-formula">
                                                <span class="latex">面积比 = π/4</span>
                                    </div>
                                </div>
                                        <div class="step-item conclusion">
                                            <div class="step-badge">∴</div>
                                            <div class="step-formula highlight">
                                                <span class="latex">π = 4 × (圆内点数/总点数)</span>
                            </div>
                        </div>
                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 概率统计卡片 -->
                        <div class="concept-card statistical">
                            <div class="card-header">
                                <div class="card-icon">📊</div>
                                <h3>概率统计</h3>
                                <div class="card-status">统计理论</div>
                            </div>
                            
                            <div class="stats-visualization">
                                <div class="statistical-theory-content">
                                    <div class="probability-explanation">
                                        <h4>📈 大数定律</h4>
                                        <p>当样本量趋向无穷时，样本均值趋近于期望值：</p>
                                        <div class="formula-box">
                                            lim<sub>n→∞</sub> (1/n) Σx<sub>i</sub> = E[X]
                                        </div>
                                        <div class="insight-box">
                                            💡 随机点的比例会趋向于理论概率 π/4
                                        </div>
                                    </div>
                                    
                                    <div class="central-limit-theorem">
                                        <h4>📊 中心极限定理</h4>
                                        <p>样本均值的分布趋向于正态分布：</p>
                                        <div class="formula-box">
                                            X̄ ~ N(μ, σ²/n)
                                        </div>
                                        <div class="confidence-interval">
                                            <strong>95% 置信区间：</strong>
                                            <span class="interval-formula">π̂ ± 1.96σ/√n</span>
                                        </div>
                                    </div>
                                    
                                    <div class="variance-analysis">
                                        <h4>📏 方差分析</h4>
                                        <div class="variance-metrics">
                                            <div class="metric-card">
                                                <div class="metric-title">理论方差</div>
                                                <div class="metric-formula">Var(X) = p(1-p)</div>
                                                <div class="metric-value">≈ 0.19</div>
                                            </div>
                                            <div class="metric-card">
                                                <div class="metric-title">标准误差</div>
                                                <div class="metric-formula">SE = σ/√n</div>
                                                <div class="metric-value" id="standardError">0.014</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="convergence-chart">
                                    <canvas id="convergenceChart" width="300" height="200"></canvas>
                                </div>
                                
                                <div class="stats-metrics">
                                    <div class="metric-item">
                                        <span class="metric-label">置信区间</span>
                                        <span class="metric-value">95%</span>
                                    </div>
                                    <div class="metric-item">
                                        <span class="metric-label">标准差</span>
                                        <span class="metric-value" id="standardDev">σ ≈ 0.05</span>
                                    </div>
                                    <div class="metric-item">
                                        <span class="metric-label">样本大小</span>
                                        <span class="metric-value" id="sampleSize">n = 1000</span>
                                    </div>
                                    <div class="metric-item">
                                        <span class="metric-label">收敛速度</span>
                                        <span class="metric-value">O(1/√n)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 算法复杂度卡片 -->
                        <div class="concept-card complexity">
                            <div class="card-header">
                                <div class="card-icon">⚡</div>
                                <h3>算法分析</h3>
                                <div class="card-status">性能评估</div>
                            </div>
                            
                            <div class="complexity-info">
                                <div class="algorithm-details">
                                    <div class="complexity-section">
                                        <h4>⏱️ 时间复杂度分析</h4>
                                        <div class="complexity-breakdown">
                                            <div class="complexity-item">
                                                <div class="complexity-label">随机数生成</div>
                                                <div class="complexity-value">O(1)</div>
                                                <div class="complexity-desc">每个点需要2个随机数</div>
                                            </div>
                                            <div class="complexity-item">
                                                <div class="complexity-label">距离计算</div>
                                                <div class="complexity-value">O(1)</div>
                                                <div class="complexity-desc">计算x²+y² ≤ 1</div>
                                            </div>
                                            <div class="complexity-item total">
                                                <div class="complexity-label">总体复杂度</div>
                                                <div class="complexity-value">O(n)</div>
                                                <div class="complexity-desc">n个采样点</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="convergence-analysis">
                                        <h4>📈 收敛性分析</h4>
                                        <div class="convergence-details">
                                            <div class="convergence-rate">
                                                <span class="rate-label">收敛速度:</span>
                                                <span class="rate-value">O(1/√n)</span>
                                            </div>
                                            <div class="convergence-explanation">
                                                <p>标准误差以 1/√n 的速度递减，这意味着：</p>
                                                <ul>
                                                    <li>要提高1位小数精度，需要100倍的采样点</li>
                                                    <li>蒙特卡洛方法的收敛速度与维度无关</li>
                                                    <li>相比数值积分，高维时更具优势</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="performance-metrics">
                                        <h4>🎯 性能指标</h4>
                                        <div class="metrics-grid">
                                            <div class="perf-metric">
                                                <div class="metric-icon">💾</div>
                                                <div class="metric-info">
                                                    <div class="metric-title">空间复杂度</div>
                                                    <div class="metric-value">O(1)</div>
                                                    <div class="metric-note">只需存储计数器</div>
                                                </div>
                                            </div>
                                            <div class="perf-metric">
                                                <div class="metric-icon">🔄</div>
                                                <div class="metric-info">
                                                    <div class="metric-title">并行化效率</div>
                                                    <div class="metric-value">98%</div>
                                                    <div class="metric-note">高度并行友好</div>
                                                </div>
                                            </div>
                                            <div class="perf-metric">
                                                <div class="metric-icon">🎲</div>
                                                <div class="metric-info">
                                                    <div class="metric-title">随机数质量</div>
                                                    <div class="metric-value">关键</div>
                                                    <div class="metric-note">影响收敛速度</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="optimization-tips">
                                    <h4>🚀 优化策略</h4>
                                    <div class="tips-container">
                                        <div class="tip-item">
                                            <div class="tip-icon">💡</div>
                                            <div class="tip-content">
                                                <strong>分层采样：</strong>将区域分层，每层独立采样可提高效率
                                            </div>
                                        </div>
                                        <div class="tip-item">
                                            <div class="tip-icon">⚡</div>
                                            <div class="tip-content">
                                                <strong>批量处理：</strong>批量生成随机数减少函数调用开销
                                            </div>
                                        </div>
                                        <div class="tip-item">
                                            <div class="tip-icon">🎯</div>
                                            <div class="tip-content">
                                                <strong>方差缩减：</strong>使用控制变量法等技术降低方差
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 交互实验区域 -->
                <div class="learning-section experiment-section">
                    <div class="section-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">🔬</span>
                            互动实验室
                        </h2>
                        <div class="experiment-meta">
                            <div class="experiment-status">
                                <span class="status-indicator" id="experimentStatus">等待中</span>
                                <div class="status-dots">
                                    <div class="dot active"></div>
                                    <div class="dot"></div>
                                    <div class="dot"></div>
                                </div>
                            </div>
                            <div class="experiment-controls">
                                <button class="control-btn primary" id="startAdvancedDemo">
                                    <i class="ri-play-circle-line"></i>
                                    启动实验
                                </button>
                                <button class="control-btn secondary" id="resetAdvancedDemo">
                                    <i class="ri-restart-line"></i>
                                    重置
                                </button>
                                <button class="control-btn accent" id="saveExperiment">
                                    <i class="ri-save-line"></i>
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="experiment-workspace">
                        <div class="experiment-canvas-wrapper">
                            <div class="canvas-header">
                                <h3>实时模拟画布</h3>
                                <div class="canvas-tools">
                                    <button class="tool-btn" id="zoomIn" title="放大">🔍+</button>
                                    <button class="tool-btn" id="zoomOut" title="缩小">🔍-</button>
                                    <button class="tool-btn" id="resetZoom" title="重置缩放">🎯</button>
                                </div>
                            </div>
                            <canvas id="tutorialCanvas" width="500" height="500"></canvas>
                            <div class="canvas-overlay-enhanced">
                                <div class="coordinate-info">
                                    <div class="coord-display">x: <span id="mouseX">0.000</span>, y: <span id="mouseY">0.000</span></div>
                                    <div class="distance-info">距离原点: <span id="mouseDistance">0.000</span></div>
                                </div>
                                
                                <div class="real-time-stats">
                                    <div class="stat-group">
                                        <div class="stat-card primary">
                                            <div class="stat-icon">🎯</div>
                                            <div class="stat-content">
                                                <span class="stat-number" id="demoTotal">0</span>
                                                <span class="stat-label">总投掷</span>
                                                <div class="stat-trend" id="totalTrend">+0/s</div>
                                            </div>
                                        </div>
                                        
                                        <div class="stat-card success">
                                            <div class="stat-icon">✅</div>
                                            <div class="stat-content">
                                                <span class="stat-number" id="demoInside">0</span>
                                                <span class="stat-label">命中圆内</span>
                                                <div class="stat-trend" id="insideTrend">0.0%</div>
                                            </div>
                                        </div>
                                        
                                        <div class="stat-card accent">
                                            <div class="stat-icon">π</div>
                                            <div class="stat-content">
                                                <span class="stat-number" id="demoPi">3.14159</span>
                                                <span class="stat-label">当前估值</span>
                                                <div class="stat-trend" id="piTrend">Δ: 0.000</div>
                                            </div>
                                        </div>
                                        
                                        <div class="stat-card warning">
                                            <div class="stat-icon">📊</div>
                                            <div class="stat-content">
                                                <span class="stat-number" id="demoError">0.0%</span>
                                                <span class="stat-label">误差率</span>
                                                <div class="stat-trend" id="errorTrend">± 0.000</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="performance-stats">
                                        <div class="perf-item">
                                            <span class="perf-label">运行时间:</span>
                                            <span class="perf-value" id="runTime">00:00:00</span>
                                        </div>
                                        <div class="perf-item">
                                            <span class="perf-label">平均FPS:</span>
                                            <span class="perf-value" id="avgFPS">60</span>
                                        </div>
                                        <div class="perf-item">
                                            <span class="perf-label">内存使用:</span>
                                            <span class="perf-value" id="memUsage">2.1MB</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="experiment-controls-panel">
                            <div class="control-section">
                                <div class="control-title">实验参数</div>
                                
                                <div class="parameter-group">
                                    <label class="param-label">
                                        <span class="label-text">模拟速度</span>
                                        <span class="label-value" id="tutorialSpeedDisplay">中等</span>
                                    </label>
                                    <div class="param-control">
                                        <input type="range" id="tutorialSpeed" class="range-slider" 
                                               min="1" max="100" value="25" 
                                               style="background: linear-gradient(90deg, var(--accent-color) 25%, rgba(255,255,255,0.1) 25%)">
                                        <div class="range-labels">
                                            <span>慢</span>
                                            <span>快</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="parameter-group">
                                    <label class="param-label">
                                        <span class="label-text">批量大小</span>
                                    </label>
                                    <select id="tutorialBatchSize" class="styled-select">
                                        <option value="1">1个点/帧</option>
                                        <option value="10" selected>10个点/帧</option>
                                        <option value="50">50个点/帧</option>
                                        <option value="100">100个点/帧</option>
                                        <option value="1000">1000个点/帧</option>
                                    </select>
                                </div>
                                
                                <div class="parameter-group">
                                    <label class="param-label">
                                        <span class="label-text">显示模式</span>
                                    </label>
                                    <div class="display-modes">
                                        <button class="mode-btn active" data-mode="points">🔴 点显示</button>
                                        <button class="mode-btn" data-mode="heatmap">🌊 密度热图</button>
                                        <button class="mode-btn" data-mode="animation">✨ 动画效果</button>
                                    </div>
                                </div>
                                
                                <div class="parameter-group">
                                    <label class="param-label">
                                        <span class="label-text">粒子大小</span>
                                        <span class="label-value" id="particleSizeDisplay">2px</span>
                                    </label>
                                    <div class="param-control">
                                        <input type="range" id="particleSize" class="range-slider" 
                                               min="1" max="8" value="2">
                                        <div class="range-labels">
                                            <span>小</span>
                                            <span>大</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="insight-panel">
                                <div class="insight-title">🤖 智能分析</div>
                                <div class="insight-content" id="experimentInsights">
                                    <div class="insight-item waiting">
                                        <div class="insight-icon">🎯</div>
                                        <div class="insight-text">开始实验以获取AI实时分析</div>
                                    </div>
                                </div>
                                
                                <div class="progress-analytics">
                                    <div class="analytics-title">收敛进度</div>
                                    <div class="convergence-bar">
                                        <div class="convergence-fill" id="convergenceProgress" style="width: 0%"></div>
                                    </div>
                                    <div class="convergence-label">
                                        <span>估值精度: </span>
                                        <span id="convergenceAccuracy">0.0%</span>
                                    </div>
                                </div>
                                
                                <div class="experiment-history">
                                    <div class="history-title">实验记录</div>
                                    <div class="history-list" id="experimentHistory">
                                        <div class="history-item placeholder">
                                            <span>暂无记录</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 历史时间线 - 重新设计 -->
                <div class="learning-section history-section">
                    <div class="section-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">⏰</span>
                            发展历程
                        </h2>
                            </div>
                    
                    <div class="timeline-enhanced">
                        <div class="timeline-line"></div>
                        
                        <div class="timeline-milestone milestone-origin">
                            <div class="milestone-marker">
                                <div class="marker-inner">1946</div>
                        </div>
                            <div class="milestone-content">
                                <div class="milestone-header">
                                    <h3>诞生时刻</h3>
                                    <span class="milestone-tag origin">起源</span>
                            </div>
                                <p>斯塔尼斯瓦夫·乌拉姆在洛斯阿拉莫斯国家实验室研究中子扩散问题时，受到患病期间玩纸牌游戏的启发，提出了蒙特卡洛方法的概念</p>
                                <div class="milestone-detail">
                                    <strong>命名由来：</strong>以摩纳哥著名的蒙特卡洛赌场命名，体现了方法的随机性本质
                        </div>
                            </div>
                        </div>
                        
                        <div class="timeline-milestone milestone-development">
                            <div class="milestone-marker">
                                <div class="marker-inner">1949</div>
                    </div>
                            <div class="milestone-content">
                                <div class="milestone-header">
                                    <h3>理论奠基</h3>
                                    <span class="milestone-tag theory">理论</span>
                                </div>
                                <p>尼古拉斯·梅特罗波利斯和乌拉姆共同发表经典论文《蒙特卡洛方法》，为该方法建立了严格的数学理论基础</p>
                                <div class="milestone-achievement">
                                    📄 发表论文：《The Monte Carlo Method》
                                </div>
                            </div>
                        </div>
                        
                        <div class="timeline-milestone milestone-expansion">
                            <div class="milestone-marker">
                                <div class="marker-inner">1953</div>
                        </div>
                            <div class="milestone-content">
                                <div class="milestone-header">
                                    <h3>算法优化</h3>
                                    <span class="milestone-tag algorithm">算法</span>
                        </div>
                                <p>梅特罗波利斯等人提出了Metropolis-Hastings算法，显著提升了蒙特卡洛方法的效率和适用范围</p>
                                <div class="milestone-impact">
                                    🚀 影响：成为马尔科夫链蒙特卡洛(MCMC)方法的基础
                        </div>
                        </div>
                    </div>
                        
                        <div class="timeline-milestone milestone-modern">
                            <div class="milestone-marker">
                                <div class="marker-inner">现代</div>
                            </div>
                            <div class="milestone-content">
                                <div class="milestone-header">
                                    <h3>广泛应用</h3>
                                    <span class="milestone-tag modern">现代</span>
                                </div>
                                <p>随着计算机技术的发展，蒙特卡洛方法在金融、物理、生物、人工智能等领域得到了爆炸式应用</p>
                                <div class="application-areas">
                                    <span class="area-tag">金融衍生品定价</span>
                                    <span class="area-tag">量子物理模拟</span>
                                    <span class="area-tag">机器学习</span>
                                    <span class="area-tag">风险评估</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 应用案例展示 - 重新设计 -->
                <div class="learning-section applications-section">
                    <div class="section-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">🌟</span>
                            前沿应用
                        </h2>
                    </div>
                    
                    <div class="applications-showcase">
                        <div class="application-category finance">
                            <div class="category-header">
                                <div class="category-icon">💰</div>
                                <h3>金融科技</h3>
                                <div class="category-badge">高频应用</div>
                            </div>
                            
                            <div class="application-examples">
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">📈</span>
                                        <strong>期权定价</strong>
                                    </div>
                                    <p>Black-Scholes模型的蒙特卡洛实现，处理复杂衍生品定价</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">随机微分方程</span>
                                        <span class="tech-tag">风险中性测度</span>
                                    </div>
                                </div>
                                
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">⚡</span>
                                        <strong>风险管理</strong>
                                    </div>
                                    <p>VaR计算和压力测试，量化投资组合风险</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">历史模拟</span>
                                        <span class="tech-tag">情景分析</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="application-category physics">
                            <div class="category-header">
                                <div class="category-icon">⚛️</div>
                                <h3>物理科学</h3>
                                <div class="category-badge">前沿研究</div>
                            </div>
                            
                            <div class="application-examples">
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">🌌</span>
                                        <strong>量子计算</strong>
                                    </div>
                                    <p>量子系统模拟，研究量子纠缠和相变现象</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">量子蒙特卡洛</span>
                                        <span class="tech-tag">路径积分</span>
                                    </div>
                                </div>
                                
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">🧬</span>
                                        <strong>分子动力学</strong>
                                    </div>
                                    <p>蛋白质折叠模拟，药物分子相互作用研究</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">分子力场</span>
                                        <span class="tech-tag">温度调节</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="application-category ai">
                            <div class="category-header">
                                <div class="category-icon">🤖</div>
                                <h3>人工智能</h3>
                                <div class="category-badge">热点领域</div>
                            </div>
                            
                            <div class="application-examples">
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">🧠</span>
                                        <strong>深度学习</strong>
                                    </div>
                                    <p>Dropout正则化、变分自编码器中的随机性建模</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">VAE</span>
                                        <span class="tech-tag">贝叶斯网络</span>
                                    </div>
                                </div>
                                
                                <div class="example-item">
                                    <div class="example-header">
                                        <span class="example-icon">🎮</span>
                                        <strong>强化学习</strong>
                                    </div>
                                    <p>策略梯度方法，AlphaGo中的蒙特卡洛树搜索</p>
                                    <div class="example-tech">
                                        <span class="tech-tag">MCTS</span>
                                        <span class="tech-tag">策略优化</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 🎯 3D可视化页面 - 全新实现 -->
        <div class="page-container" id="3d-visualization-page">
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <div class="title-3d-wrapper">
                        <div class="floating-cube">📦</div>
                        <h1 class="gradient-text">沉浸式3D体验</h1>
                        <p class="page-description">三维空间中的圆方诗学，立体感知π值的几何之美</p>
                    </div>
                </div>
            </header>

            <main class="page-main visualization-3d-main">
                <!-- 3D控制面板 -->
                <div class="controls-3d-panel glass">
                    <div class="panel-section simulation-controls">
                        <h3><i class="ri-gamepad-line"></i> 模拟控制</h3>
                        <div class="control-grid">
                            <button class="control-btn-3d primary" id="start3DSimulation">
                                <i class="ri-play-circle-line"></i>
                                启动3D模拟
                            </button>
                            <button class="control-btn-3d secondary" id="pause3DSimulation">
                                <i class="ri-pause-circle-line"></i>
                                暂停
                            </button>
                            <button class="control-btn-3d secondary" id="reset3DSimulation">
                                <i class="ri-refresh-line"></i>
                                重置
                            </button>
                            <button class="control-btn-3d accent" id="screenshot3D">
                                <i class="ri-camera-line"></i>
                                截图
                            </button>
                            </div>
                        </div>

                    <div class="panel-section view-controls">
                        <h3><i class="ri-camera-3-line"></i> 视图控制</h3>
                        <div class="view-options">
                            <div class="view-preset" data-preset="default">
                                <div class="preset-icon">🏠</div>
                                <span>默认视角</span>
                        </div>
                            <div class="view-preset" data-preset="top">
                                <div class="preset-icon">⬆️</div>
                                <span>俯视图</span>
                            </div>
                            <div class="view-preset" data-preset="side">
                                <div class="preset-icon">➡️</div>
                                <span>侧视图</span>
                            </div>
                            <div class="view-preset active" data-preset="perspective">
                                <div class="preset-icon">🎯</div>
                                <span>透视图</span>
                            </div>
                        </div>
                    </div>

                    <div class="panel-section parameters">
                        <h3><i class="ri-equalizer-line"></i> 参数调节</h3>
                        
                        <div class="parameter-row">
                            <label>粒子数量</label>
                            <div class="param-control">
                                <input type="range" id="particleCount3D" min="100" max="10000" value="1000" 
                                       class="range-3d">
                                <span id="particleCount3DValue">1000</span>
                            </div>
                        </div>
                        
                        <div class="parameter-row">
                            <label>动画速度</label>
                            <div class="param-control">
                                <input type="range" id="animationSpeed3D" min="0.1" max="5" value="1" step="0.1"
                                       class="range-3d">
                                <span id="animationSpeed3DValue">1.0x</span>
                            </div>
                        </div>
                        
                        <div class="parameter-row">
                            <label>点大小</label>
                            <div class="param-control">
                                <input type="range" id="pointSize3D" min="0.5" max="3" value="1" step="0.1"
                                       class="range-3d">
                                <span id="pointSize3DValue">1.0</span>
                            </div>
                        </div>

                        <div class="toggle-options">
                            <label class="toggle-label">
                                <input type="checkbox" id="showGrid3D" checked>
                                <span class="toggle-slider"></span>
                                显示网格
                            </label>
                            
                            <label class="toggle-label">
                                <input type="checkbox" id="showAxes3D" checked>
                                <span class="toggle-slider"></span>
                                显示坐标轴
                            </label>
                            
                            <label class="toggle-label">
                                <input type="checkbox" id="enableRotation3D">
                                <span class="toggle-slider"></span>
                                自动旋转
                            </label>
                        </div>
                    </div>
                    
                    <!-- 可视化模式选择 -->
                    <div class="panel-section visualization-modes-section">
                        <h3><i class="ri-camera-3-line"></i> 可视化模式</h3>
                        <div class="mode-grid-compact">
                            <div class="mode-card-compact active" data-mode="default">
                                <div class="mode-preview-compact">
                                    <div class="preview-sphere"></div>
                                    <div class="preview-points">•••</div>
                                </div>
                                <div class="mode-info-compact">
                                    <span>标准模式</span>
                                </div>
                            </div>
                            
                            <div class="mode-card-compact" data-mode="heatmap">
                                <div class="mode-preview-compact heatmap-preview">
                                    <div class="preview-gradient"></div>
                                </div>
                                <div class="mode-info-compact">
                                    <span>热力图</span>
                                </div>
                            </div>
                            
                            <div class="mode-card-compact" data-mode="path">
                                <div class="mode-preview-compact path-preview">
                                    <div class="preview-trail">～～～</div>
                                </div>
                                <div class="mode-info-compact">
                                    <span>轨迹模式</span>
                                </div>
                            </div>
                            
                            <div class="mode-card-compact" data-mode="statistical">
                                <div class="mode-preview-compact stats-preview">
                                    <div class="preview-chart">📊</div>
                                </div>
                                <div class="mode-info-compact">
                                    <span>统计模式</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 主3D场景区域 -->
                <div class="scene-3d-container">
                    <div class="scene-wrapper">
                        <div id="threejs-container" class="threejs-container"></div>
                        
                        <!-- 3D统计数据覆盖层 -->
                        <div class="stats-overlay-3d">
                            <div class="stat-3d-group">
                                <div class="stat-3d-item primary">
                                    <div class="stat-icon-3d">🎯</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="totalPoints3D">0</span>
                                        <span class="stat-label">总投点</span>
                                    </div>
                                </div>
                                
                                <div class="stat-3d-item success">
                                    <div class="stat-icon-3d">✅</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="insidePoints3D">0</span>
                                        <span class="stat-label">球内点</span>
                                    </div>
                                </div>
                                
                                <div class="stat-3d-item accent">
                                    <div class="stat-icon-3d">π</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="piValue3D">0.0000</span>
                                        <span class="stat-label">π估值</span>
                                    </div>
                                </div>
                                
                                <div class="stat-3d-item warning">
                                    <div class="stat-icon-3d">📊</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="accuracy3D">0.0%</span>
                                        <span class="stat-label">精度</span>
                                    </div>
                                </div>
                            </div>
                            
                            
                        </div>
                        
                        <!-- 3D说明面板 -->
                        <div class="info-panel-3d">
                            <div class="info-toggle" id="infoToggle3D">
                                <i class="ri-information-line"></i>
                            </div>
                            <div class="info-content" id="infoContent3D">
                                <h4>3D蒙特卡洛原理</h4>
                                <p>在三维空间中，我们使用一个边长为3.2的立方体包围一个半径为1.6的球体。</p>
                                <div class="formula-3d">
                                    <strong>球体积：</strong> V = (4/3)πr³ = (4/3)π(1.6)³<br>
                                    <strong>立方体积：</strong> V = (3.2)³ = 32.768<br>
                                    <strong>体积比：</strong> π/6<br>
                                    <strong>因此：</strong> π = 6 × (球内点数/总点数)
                                </div>
                                <div class="controls-hint">
                                    💡 <strong>操作提示：</strong><br>
                                    • 鼠标拖拽旋转视角<br>
                                    • 滚轮缩放场景<br>
                                    • 右键拖拽平移视图
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 底部控制区域 - 可视化模式已移至右侧控制面板 -->
                <div class="bottom-controls">
                    <!-- 保留区域用于其他功能扩展 -->
                    <div class="bottom-info-section">
                        
                    </div>
                </div>
            </main>
        </div>

        <!-- 📊 算法对比页面 - 全新设计 -->
        <div class="page-container" id="comparison-page">
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <div class="comparison-header-wrapper">
                        <div class="floating-algorithm-icon">⚖️</div>
                        <h1 class="gradient-text">算法竞技场</h1>
                        <p class="page-description">多种算法殊途同归，在圆方之间共同探寻π的奥秘</p>
                    </div>
                    <div class="performance-dashboard">
                        <div class="dashboard-metric">
                            <span class="metric-value" id="totalAlgorithms">4</span>
                            <span class="metric-label">算法数量</span>
                        </div>
                        <div class="dashboard-metric">
                            <span class="metric-value" id="activeComparisons">0</span>
                            <span class="metric-label">运行中</span>
                        </div>
                        <div class="dashboard-metric">
                            <span class="metric-value" id="bestAccuracy">--</span>
                            <span class="metric-label">最佳精度</span>
                        </div>
                    </div>
                </div>
            </header>

            <main class="page-main comparison-redesigned">
                <!-- 算法展示区域 - 全新设计 -->
                <div class="algorithms-showcase">
                    <div class="section-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">🚀</span>
                            算法选择中心
                        </h2>
                        <div class="selection-controls">
                            <button class="selection-btn" id="selectAllAlgorithms">全选</button>
                            <button class="selection-btn" id="clearAllAlgorithms">清除</button>
                            <button class="selection-btn" id="resetAlgorithms">重置</button>
                                </div>
                            </div>
                    
                    <div class="algorithms-grid-enhanced">
                        <!-- 蒙特卡洛算法卡片 -->
                        <div class="algorithm-card-enhanced active selected" data-algorithm="monte-carlo">
                            <div class="card-glow"></div>
                            <div class="card-content">
                                <div class="algorithm-header">
                                    <div class="algorithm-icon-enhanced">🎲</div>
                        </div>

                                <div class="algorithm-details">
                                    <h3>蒙特卡洛方法</h3>
                                    <p class="algorithm-description">基于随机采样的统计方法</p>
                                    
                                    <div class="formula-preview">
                                        <code>π ≈ 4 × (圆内点数/总点数)</code>
                                </div>
                                    
                                    <div class="performance-metrics">
                                        <div class="metric-item">
                                            <span class="metric-name">复杂度</span>
                                            <span class="metric-badge complexity-linear">O(n)</span>
                            </div>
                                        <div class="metric-item">
                                            <span class="metric-name">收敛性</span>
                                            <span class="metric-badge convergence-medium">1/√n</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">精度</span>
                                            <div class="accuracy-stars">
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star">★</span>
                                                <span class="star">★</span>
                                            </div>
                                        </div>
                        </div>

                                    <div class="algorithm-features">
                                        <span class="feature-tag">随机性</span>
                                        <span class="feature-tag">概率统计</span>
                                        <span class="feature-tag">几何方法</span>
                                </div>
                            </div>
                            </div>
                        </div>

                        <!-- 莱布尼兹级数卡片 -->
                        <div class="algorithm-card-enhanced" data-algorithm="leibniz">
                            <div class="card-glow"></div>
                            <div class="card-content">
                                <div class="algorithm-header">
                                    <div class="algorithm-icon-enhanced">∞</div>
                            </div>
                                
                                <div class="algorithm-details">
                                    <h3>莱布尼兹级数</h3>
                                    <p class="algorithm-description">经典的无穷级数逼近法</p>
                                    
                                    <div class="formula-preview">
                                        <code>π/4 = 1 - 1/3 + 1/5 - 1/7 + ...</code>
                        </div>
                                    
                                    <div class="performance-metrics">
                                        <div class="metric-item">
                                            <span class="metric-name">复杂度</span>
                                            <span class="metric-badge complexity-linear">O(n)</span>
                    </div>
                                        <div class="metric-item">
                                            <span class="metric-name">收敛性</span>
                                            <span class="metric-badge convergence-slow">1/n</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">精度</span>
                                            <div class="accuracy-stars">
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star">★</span>
                                                <span class="star">★</span>
                                                <span class="star">★</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="algorithm-features">
                                        <span class="feature-tag">级数求和</span>
                                        <span class="feature-tag">交错级数</span>
                                        <span class="feature-tag">解析方法</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 尼拉卡塔级数卡片 -->
                        <div class="algorithm-card-enhanced" data-algorithm="nilakantha">
                            <div class="card-glow"></div>
                            <div class="card-content">
                                <div class="algorithm-header">
                                    <div class="algorithm-icon-enhanced">🔺</div>
                                </div>
                                
                                <div class="algorithm-details">
                                    <h3>尼拉卡塔级数</h3>
                                    <p class="algorithm-description">快速收敛的印度古典算法</p>
                                    
                                    <div class="formula-preview">
                                        <code>π = 3 + 4/(2×3×4) - 4/(4×5×6) + ...</code>
                                    </div>
                                    
                                    <div class="performance-metrics">
                                        <div class="metric-item">
                                            <span class="metric-name">复杂度</span>
                                            <span class="metric-badge complexity-linear">O(n)</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">收敛性</span>
                                            <span class="metric-badge convergence-fast">1/n³</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">精度</span>
                                            <div class="accuracy-stars">
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star">★</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="algorithm-features">
                                        <span class="feature-tag">快速收敛</span>
                                        <span class="feature-tag">三角几何</span>
                                        <span class="feature-tag">古典算法</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 布丰投针实验卡片 -->
                        <div class="algorithm-card-enhanced" data-algorithm="buffon">
                            <div class="card-glow"></div>
                            <div class="card-content">
                                <div class="algorithm-header">
                                    <div class="algorithm-icon-enhanced">📏</div>
                                </div>
                                
                                <div class="algorithm-details">
                                    <h3>布丰投针实验</h3>
                                    <p class="algorithm-description">优雅的几何概率实验</p>
                                    
                                    <div class="formula-preview">
                                        <code>π ≈ 2L/(P×d)</code>
                                    </div>
                                    
                                    <div class="performance-metrics">
                                        <div class="metric-item">
                                            <span class="metric-name">复杂度</span>
                                            <span class="metric-badge complexity-linear">O(n)</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">收敛性</span>
                                            <span class="metric-badge convergence-medium">1/√n</span>
                                        </div>
                                        <div class="metric-item">
                                            <span class="metric-name">精度</span>
                                            <div class="accuracy-stars">
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star active">★</span>
                                                <span class="star">★</span>
                                                <span class="star">★</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="algorithm-features">
                                        <span class="feature-tag">几何概率</span>
                                        <span class="feature-tag">物理模拟</span>
                                        <span class="feature-tag">历史经典</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时对比结果 -->
                <section class="glass">
                    <h2><i class="ri-line-chart-line"></i> 实时对比</h2>
                    <div class="comparison-container">
                        <div class="comparison-controls">
                            <div class="control-group">
                                <label>迭代次数：</label>
                                <select id="comparisonIterations">
                                    <option value="1000">1,000次</option>
                                    <option value="10000" selected>10,000次</option>
                                    <option value="100000">100,000次</option>
                                </select>
                            </div>
                            <button class="btn primary" id="startComparison">
                                <i class="ri-play-line"></i> 开始对比
                            </button>
                        </div>

                        <div class="comparison-results-enhanced">
                            <!-- 实时对比控制台 -->
                            <div class="comparison-console">
                                <div class="console-header">
                                    <h3><i class="ri-terminal-line"></i> 竞技场控制台</h3>
                                    <div class="console-actions">
                                        <button class="console-btn primary" id="startBattleComparison">
                                            <i class="ri-sword-line"></i>
                                            开始竞技
                                        </button>
                                        <button class="console-btn secondary" id="pauseBattleComparison">
                                            <i class="ri-pause-line"></i>
                                            暂停
                                        </button>
                                        <button class="console-btn accent" id="exportResults">
                                            <i class="ri-download-line"></i>
                                            导出结果
                                        </button>
                                    </div>
                            </div>

                                <div class="battle-parameters">
                                    <div class="param-group">
                                        <label>竞技强度</label>
                                        <div class="intensity-selector">
                                            <button class="intensity-btn" data-iterations="1000">轻量级</button>
                                            <button class="intensity-btn active" data-iterations="10000">中量级</button>
                                            <button class="intensity-btn" data-iterations="100000">重量级</button>
                                            <button class="intensity-btn" data-iterations="1000000">冠军级</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 实时比赛状态 -->
                            <div class="battle-arena">
                                <div class="arena-grid">
                                    <div class="competitor monte-carlo" data-algorithm="monte-carlo">
                                        <div class="competitor-header">
                                            <div class="competitor-avatar">🎲</div>
                                            <div class="competitor-info">
                                                <h4>蒙特卡洛</h4>
                                                <span class="competitor-type">随机型</span>
                                            </div>
                                            <div class="competitor-status ready">
                                                <i class="ri-check-circle-line"></i>
                                                就绪
                                            </div>
                                        </div>
                                        <div class="competitor-metrics">
                                            <div class="metric-row">
                                                <span class="metric-label">π值:</span>
                                                <span class="metric-value" id="mcResultEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">精度:</span>
                                                <span class="metric-value" id="mcAccuracyEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">耗时:</span>
                                                <span class="metric-value" id="mcTimeEnhanced">--</span>
                                            </div>
                                        </div>
                                        <div class="progress-indicator">
                                            <div class="progress-bar" id="mcProgress"></div>
                                        </div>
                                    </div>

                                    <div class="competitor leibniz" data-algorithm="leibniz">
                                        <div class="competitor-header">
                                            <div class="competitor-avatar">∞</div>
                                            <div class="competitor-info">
                                                <h4>莱布尼兹</h4>
                                                <span class="competitor-type">级数型</span>
                                            </div>
                                            <div class="competitor-status ready">
                                                <i class="ri-check-circle-line"></i>
                                                就绪
                                            </div>
                                        </div>
                                        <div class="competitor-metrics">
                                            <div class="metric-row">
                                                <span class="metric-label">π值:</span>
                                                <span class="metric-value" id="leibnizResultEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">精度:</span>
                                                <span class="metric-value" id="leibnizAccuracyEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">耗时:</span>
                                                <span class="metric-value" id="leibnizTimeEnhanced">--</span>
                                            </div>
                                        </div>
                                        <div class="progress-indicator">
                                            <div class="progress-bar" id="leibnizProgress"></div>
                                        </div>
                                    </div>

                                    <div class="competitor nilakantha" data-algorithm="nilakantha">
                                        <div class="competitor-header">
                                            <div class="competitor-avatar">🔺</div>
                                            <div class="competitor-info">
                                                <h4>尼拉卡塔</h4>
                                                <span class="competitor-type">快速型</span>
                                            </div>
                                            <div class="competitor-status ready">
                                                <i class="ri-check-circle-line"></i>
                                                就绪
                                            </div>
                                        </div>
                                        <div class="competitor-metrics">
                                            <div class="metric-row">
                                                <span class="metric-label">π值:</span>
                                                <span class="metric-value" id="nilakanthaResultEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">精度:</span>
                                                <span class="metric-value" id="nilakanthaAccuracyEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">耗时:</span>
                                                <span class="metric-value" id="nilakanthaTimeEnhanced">--</span>
                                            </div>
                                        </div>
                                        <div class="progress-indicator">
                                            <div class="progress-bar" id="nilakanthaProgress"></div>
                                        </div>
                                    </div>

                                    <div class="competitor buffon" data-algorithm="buffon">
                                        <div class="competitor-header">
                                            <div class="competitor-avatar">📏</div>
                                            <div class="competitor-info">
                                                <h4>布丰投针</h4>
                                                <span class="competitor-type">几何型</span>
                                            </div>
                                            <div class="competitor-status ready">
                                                <i class="ri-check-circle-line"></i>
                                                就绪
                                            </div>
                                        </div>
                                        <div class="competitor-metrics">
                                            <div class="metric-row">
                                                <span class="metric-label">π值:</span>
                                                <span class="metric-value" id="buffonResultEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">精度:</span>
                                                <span class="metric-value" id="buffonAccuracyEnhanced">--</span>
                                            </div>
                                            <div class="metric-row">
                                                <span class="metric-label">耗时:</span>
                                                <span class="metric-value" id="buffonTimeEnhanced">--</span>
                                            </div>
                                        </div>
                                        <div class="progress-indicator">
                                            <div class="progress-bar" id="buffonProgress"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 动态可视化图表 -->
                            <div class="visualization-dashboard">
                                <div class="dashboard-section convergence-chart">
                                    <h3><i class="ri-line-chart-line"></i> 收敛性对比</h3>
                                    <div class="chart-container">
                                        <canvas id="convergenceComparisonChart" width="800" height="400"></canvas>
                                    </div>
                                    <div class="chart-legend">
                                        <div class="legend-item monte-carlo">
                                            <div class="legend-color"></div>
                                            <span>蒙特卡洛</span>
                                        </div>
                                        <div class="legend-item leibniz">
                                            <div class="legend-color"></div>
                                            <span>莱布尼兹</span>
                                        </div>
                                        <div class="legend-item nilakantha">
                                            <div class="legend-color"></div>
                                            <span>尼拉卡塔</span>
                                        </div>
                                        <div class="legend-item buffon">
                                            <div class="legend-color"></div>
                                            <span>布丰投针</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="dashboard-section performance-radar">
                                    <h3><i class="ri-radar-line"></i> 性能雷达图</h3>
                                    <div class="radar-container">
                                        <canvas id="performanceRadarChart" width="400" height="400"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 算法详解 -->
                <section class="glass">
                    <h2><i class="ri-book-line"></i> 算法详解</h2>
                    <div class="algorithm-explanation">
                        <div class="explanation-card">
                            <h3>🎲 蒙特卡洛方法</h3>
                            <div class="explanation-content">
                                <p><strong>原理：</strong>通过在单位正方形内随机投掷点，统计落在内切圆内的点数比例来估算π值。</p>
                                <p><strong>公式：</strong>π ≈ 4 × (圆内点数 / 总点数)</p>
                                <p><strong>优点：</strong>易于理解，易于并行化，适用于高维问题</p>
                                <p><strong>缺点：</strong>收敛较慢，需要大量采样点才能获得高精度</p>
                                <div class="complexity-analysis">
                                    <div class="complexity-item">
                                        <strong>时间复杂度：</strong>O(n)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>空间复杂度：</strong>O(1)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>收敛速度：</strong>O(1/√n)
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="explanation-card">
                            <h3>∞ 莱布尼兹级数</h3>
                            <div class="explanation-content">
                                <p><strong>原理：</strong>利用反正切函数的泰勒级数展开式计算π值。基于arctan(1) = π/4的事实。</p>
                                <p><strong>公式：</strong>π = 4 × (1 - 1/3 + 1/5 - 1/7 + 1/9 - ...)</p>
                                <p><strong>优点：</strong>无需随机数，收敛性有理论保证，计算简单直观</p>
                                <p><strong>缺点：</strong>收敛极慢，需要数百万项才能达到较高精度</p>
                                <div class="complexity-analysis">
                                    <div class="complexity-item">
                                        <strong>时间复杂度：</strong>O(n)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>空间复杂度：</strong>O(1)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>收敛速度：</strong>O(1/n)
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="explanation-card">
                            <h3>🔺 尼拉卡塔级数</h3>
                            <div class="explanation-content">
                                <p><strong>原理：</strong>由15世纪印度数学家尼拉卡塔发现的快速收敛级数。基于几何学中的三角恒等式。</p>
                                <p><strong>公式：</strong>π = 3 + 4/(2×3×4) - 4/(4×5×6) + 4/(6×7×8) - ...</p>
                                <p><strong>优点：</strong>收敛速度极快，每项精度提升显著，历史悠久的经典算法</p>
                                <p><strong>缺点：</strong>公式相对复杂，需要连续整数的乘积计算</p>
                                <div class="complexity-analysis">
                                    <div class="complexity-item">
                                        <strong>时间复杂度：</strong>O(n)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>空间复杂度：</strong>O(1)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>收敛速度：</strong>O(1/n³)
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="explanation-card">
                            <h3>📏 布丰投针实验</h3>
                            <div class="explanation-content">
                                <p><strong>原理：</strong>18世纪法国数学家布丰提出的几何概率实验。通过投掷针与平行线的相交概率估算π值。</p>
                                <p><strong>公式：</strong>π ≈ 2L/(P×d)，其中L为针长，d为线间距，P为相交概率</p>
                                <p><strong>优点：</strong>物理直观，体现几何概率之美，可实际操作验证</p>
                                <p><strong>缺点：</strong>收敛较慢，结果波动大，需要大量实验次数</p>
                                <div class="complexity-analysis">
                                    <div class="complexity-item">
                                        <strong>时间复杂度：</strong>O(n)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>空间复杂度：</strong>O(1)
                                    </div>
                                    <div class="complexity-item">
                                        <strong>收敛速度：</strong>O(1/√n)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- 🏆 成就中心页面 - 全新设计 -->
        <div class="page-container" id="achievements-page">
            <!-- 装饰性几何背景 -->
            <div class="achievements-decoration">
                <div class="floating-element element-1">🎖️</div>
                <div class="floating-element element-2">⭐</div>
                <div class="floating-element element-3">💎</div>
                <div class="floating-element element-4">🎯</div>
                <div class="floating-element element-5">🏅</div>
                <div class="geometric-shape shape-triangle"></div>
                <div class="geometric-shape shape-circle"></div>
                <div class="geometric-shape shape-hexagon"></div>
                <div class="geometric-shape shape-diamond"></div>
            </div>
            <header class="page-header glass animate__animated animate__fadeInDown">
                <div class="page-title">
                    <div class="achievements-header-wrapper">
                        <div class="floating-trophy">🏆</div>
                        <h1 class="gradient-text">成就殿堂</h1>
                        <p class="page-description">在圆方世界中收获智慧，于π的探索中成就非凡</p>
                        <div class="achievement-motto">
                            <span class="motto-text">「每一点落于圆方之间，每一步皆向π值迈进」</span>
                            <div class="motto-author">—— 蒙特卡洛大师</div>
                        </div>
                    </div>
                    <div class="achievement-summary">
                        <div class="summary-metric">
                            <span class="metric-value" id="totalAchievements">12</span>
                            <span class="metric-label">总成就</span>
                            <span class="metric-desc">π值探索的里程碑</span>
                        </div>
                        <div class="summary-metric">
                            <span class="metric-value" id="unlockedAchievements">5</span>
                            <span class="metric-label">已解锁</span>
                            <span class="metric-desc">完成度 41.7%</span>
                        </div>
                        <div class="summary-metric">
                            <span class="metric-value" id="achievementPoints">1,250</span>
                            <span class="metric-label">成就点数</span>
                            <span class="metric-desc">数学造诣的象征</span>
                        </div>
                        <div class="summary-metric">
                            <span class="metric-value">数学大师</span>
                            <span class="metric-label">当前称号</span>
                            <span class="metric-desc">下一级：算法宗师</span>
                        </div>
                    </div>
                </div>
            </header>

            <main class="page-main achievements-redesigned">
                <!-- 玩家档案卡片 -->
                <div class="player-profile-section">
                    <div class="profile-card-enhanced glass">
                        <div class="profile-background">
                            <div class="profile-pattern"></div>
                        </div>
                        
                        <div class="profile-content">
                            <div class="profile-avatar-enhanced">
                                <div class="avatar-ring">
                                    <div class="avatar-inner">
                                <i class="ri-user-star-line"></i>
                                        <div class="level-indicator" id="playerLevel">15</div>
                            </div>
                        </div>
                                <div class="rank-badge" id="playerRank">数学大师</div>
                                </div>
                            
                            <div class="profile-info-enhanced">
                                <h3 class="player-title" id="playerTitle">π值征服者</h3>
                                <div class="player-subtitle">专精蒙特卡洛算法</div>
                                <div class="title-description">
                                    <p>通过无数次随机投掷，在数学的浩瀚星空中找到了π的精确轨迹。</p>
                                    <div class="title-achievements">
                                        <span class="achievement-tag">✨ 精度大师</span>
                                        <span class="achievement-tag">🎯 百万投掷</span>
                                        <span class="achievement-tag">⚡ 速算之王</span>
                                    </div>
                                </div>
                                
                                <div class="experience-system">
                                    <div class="exp-bar-enhanced">
                                        <div class="exp-progress" id="expProgress" style="width: 68%">
                                            <div class="exp-glow"></div>
                            </div>
                        </div>
                                    <div class="exp-info">
                                        <span class="current-exp" id="currentExp">680</span>
                                        <span class="exp-separator">/</span>
                                        <span class="max-exp" id="maxExp">1000</span>
                                        <span class="exp-label">经验值</span>
                                        <div class="exp-details">
                                            <div class="next-level-info">
                                                距离下一级：<strong>320 EXP</strong>
                                            </div>
                                            <div class="exp-sources">
                                                <span class="source-item">🎯 完成模拟 +50</span>
                                                <span class="source-item">🏆 解锁成就 +200</span>
                                                <span class="source-item">⚡ 达成精度 +100</span>
                                            </div>
                                        </div>
                            </div>
                            </div>
                            </div>
                            
                            <div class="profile-stats-enhanced">
                                <div class="stat-item primary">
                                    <div class="stat-icon">🎯</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="totalSimulations">342</span>
                                        <span class="stat-label">模拟次数</span>
                            </div>
                        </div>
                                
                                <div class="stat-item success">
                                    <div class="stat-icon">📊</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="bestAccuracy">99.87%</span>
                                        <span class="stat-label">最高精度</span>
                    </div>
                                </div>
                                
                                <div class="stat-item accent">
                                    <div class="stat-icon">🔢</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="totalSamples">2.8M</span>
                                        <span class="stat-label">总采样点</span>
                                    </div>
                        </div>

                                <div class="stat-item warning">
                                    <div class="stat-icon">⏱️</div>
                                    <div class="stat-data">
                                        <span class="stat-value" id="totalTime">8.5小时</span>
                                        <span class="stat-label">使用时长</span>
                        </div>
                    </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 成就展示区域 - 全新设计 -->
                <div class="achievements-gallery">
                    <div class="gallery-header">
                        <h2 class="section-title">
                            <span class="icon-wrapper">🎖️</span>
                            成就画廊
                        </h2>
                        
                        <div class="achievement-filters-enhanced">
                            <button class="filter-chip active" data-filter="all">
                                <span class="chip-icon">🌟</span>
                                全部
                            </button>
                            <button class="filter-chip" data-filter="precision">
                                <span class="chip-icon">🎯</span>
                                精度大师
                            </button>
                            <button class="filter-chip" data-filter="speed">
                                <span class="chip-icon">⚡</span>
                                速度之王
                            </button>
                            <button class="filter-chip" data-filter="explorer">
                                <span class="chip-icon">🧭</span>
                                算法探索
                            </button>
                            <button class="filter-chip" data-filter="milestone">
                                <span class="chip-icon">🏔️</span>
                                里程碑
                            </button>
                        </div>
                    </div>

                    <div class="achievements-showcase-grid">
                        <!-- 精度类成就 -->
                        <div class="achievement-card-premium unlocked precision" data-achievement="precision-master">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon legendary">🎯</div>
                                <div class="achievement-rarity legendary">传奇</div>
                            </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">精度大师</h3>
                                <p class="achievement-desc">达到99%以上的计算精度</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 100%"></div>
                                    <span class="progress-text">100% 完成</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+500 经验</span>
                                    <span class="reward-title">称号："数学天才"</span>
                            </div>
                        </div>

                            <div class="achievement-timestamp">
                                解锁时间：2025-01-15
                            </div>
                        </div>

                        <!-- 速度类成就 -->
                        <div class="achievement-card-premium unlocked speed" data-achievement="speed-demon">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon epic">⚡</div>
                                <div class="achievement-rarity epic">史诗</div>
                                    </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">闪电计算</h3>
                                <p class="achievement-desc">在30秒内完成100万次采样</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 100%"></div>
                                    <span class="progress-text">100% 完成</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+300 经验</span>
                                    <span class="reward-title">特效："粒子加速"</span>
                                    </div>
                                </div>
                            
                            <div class="achievement-timestamp">
                                解锁时间：2025-01-20
                            </div>
                        </div>

                        <!-- 探索类成就 -->
                        <div class="achievement-card-premium locked explorer" data-achievement="algorithm-explorer">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon rare">🧭</div>
                                <div class="achievement-rarity rare">稀有</div>
                    </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">算法探索者</h3>
                                <p class="achievement-desc">尝试所有四种π值计算算法</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 75%"></div>
                                    <span class="progress-text">3/4 完成</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+200 经验</span>
                                    <span class="reward-title">解锁：对比模式</span>
                                </div>
                            </div>
                            
                            <div class="unlock-condition">
                                还需尝试：布丰投针实验
                            </div>
                        </div>

                        <!-- 里程碑成就 -->
                        <div class="achievement-card-premium unlocked milestone" data-achievement="million-points">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon epic">🏔️</div>
                                <div class="achievement-rarity epic">史诗</div>
                            </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">百万里程碑</h3>
                                <p class="achievement-desc">累计生成100万个采样点</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 100%"></div>
                                    <span class="progress-text">100% 完成</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+1000 经验</span>
                                    <span class="reward-title">头像框："π之环"</span>
                                </div>
                            </div>
                            
                            <div class="achievement-timestamp">
                                解锁时间：2025-01-18
                            </div>
                        </div>

                        <!-- 坚持类成就 -->
                        <div class="achievement-card-premium locked precision" data-achievement="daily-devotion">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon common">📅</div>
                                <div class="achievement-rarity common">普通</div>
                            </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">每日专研</h3>
                                <p class="achievement-desc">连续7天使用π值估算器</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 42%"></div>
                                    <span class="progress-text">3/7 天</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+150 经验</span>
                                    <span class="reward-title">徽章："持之以恒"</span>
                                </div>
                            </div>
                            
                            <div class="unlock-condition">
                                还需坚持：4天
                            </div>
                        </div>

                        <!-- 更多成就卡片... -->
                        <div class="achievement-card-premium locked milestone" data-achievement="pi-perfectionist">
                            <div class="achievement-glow"></div>
                            <div class="achievement-border"></div>
                            
                            <div class="achievement-header">
                                <div class="achievement-icon legendary">🎖️</div>
                                <div class="achievement-rarity legendary">传奇</div>
                            </div>
                            
                            <div class="achievement-content">
                                <h3 class="achievement-title">π值完美主义者</h3>
                                <p class="achievement-desc">达到99.99%的极致精度</p>
                                <div class="achievement-progress">
                                    <div class="progress-fill" style="width: 85%"></div>
                                    <span class="progress-text">85% 接近</span>
                                </div>
                                <div class="achievement-rewards">
                                    <span class="reward-points">+2000 经验</span>
                                    <span class="reward-title">传说称号："π值之神"</span>
                                </div>
                            </div>
                            
                            <div class="unlock-condition">
                                目标精度：99.99%
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 进度统计面板 -->
                <div class="progress-overview-section">
                    <div class="overview-card glass">
                        <h3><i class="ri-trophy-2-line"></i> 成就进度概览</h3>
                        
                        <div class="category-progress">
                            <div class="category-item">
                                <div class="category-info">
                                    <span class="category-name">精度大师</span>
                                    <span class="category-count">2/3</span>
                                </div>
                                <div class="category-bar">
                                    <div class="bar-fill precision" style="width: 66.7%"></div>
                                </div>
                            </div>
                            
                            <div class="category-item">
                                <div class="category-info">
                                    <span class="category-name">速度之王</span>
                                    <span class="category-count">1/2</span>
                                </div>
                                <div class="category-bar">
                                    <div class="bar-fill speed" style="width: 50%"></div>
                                </div>
                            </div>
                            
                            <div class="category-item">
                                <div class="category-info">
                                    <span class="category-name">算法探索</span>
                                    <span class="category-count">0/3</span>
                                </div>
                                <div class="category-bar">
                                    <div class="bar-fill explorer" style="width: 25%"></div>
                                </div>
                            </div>
                            
                            <div class="category-item">
                                <div class="category-info">
                                    <span class="category-name">里程碑</span>
                                    <span class="category-count">2/4</span>
                                </div>
                                <div class="category-bar">
                                    <div class="bar-fill milestone" style="width: 50%"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="next-achievement">
                            <h4>下一个目标</h4>
                            <div class="next-achievement-preview">
                                <div class="next-icon">🧭</div>
                                <div class="next-info">
                                    <span class="next-title">算法探索者</span>
                                    <span class="next-progress">75% 完成</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

    </div>

    <!-- 🚀 分享模态框 -->
    <div class="share-modal" id="shareModal">
        <div class="share-modal-content">
            <div class="share-modal-header">
                <h3 class="share-modal-title">
                    <i class="ri-share-line"></i>
                    分享你的π值成就
                </h3>
                <button class="share-close-btn" id="shareCloseBtn">
                    <i class="ri-close-line"></i>
                </button>
            </div>
            
            <div class="share-preview">
                <div class="share-achievement-text" id="shareAchievementText">
                    🎉 我在蒙特卡洛π值估算中达到了99.2%的精度！
                </div>
                
                <div class="share-stats">
                    <div class="share-stat">
                        <div class="share-stat-value" id="shareStatPi">3.14159265</div>
                        <div class="share-stat-label">π值估算</div>
                    </div>
                    <div class="share-stat">
                        <div class="share-stat-value" id="shareStatAccuracy">99.2%</div>
                        <div class="share-stat-label">精确度</div>
                    </div>
                    <div class="share-stat">
                        <div class="share-stat-value" id="shareStatPoints">50000</div>
                        <div class="share-stat-label">采样点数</div>
                    </div>
                    <div class="share-stat">
                        <div class="share-stat-value" id="shareStatError">0.8%</div>
                        <div class="share-stat-label">误差率</div>
                    </div>
                </div>
            </div>
            
            <div class="share-buttons">
                <button class="social-share-btn weibo" id="shareWeibo">
                    <i class="ri-weibo-line"></i>
                    分享到微博
                </button>
                <button class="social-share-btn wechat" id="shareWechat">
                    <i class="ri-wechat-line"></i>
                    生成微信二维码
                </button>
                <button class="social-share-btn copy" id="shareCopy">
                    <i class="ri-file-copy-line"></i>
                    复制分享文本
                </button>
                <button class="social-share-btn download" id="shareDownload">
                    <i class="ri-download-line"></i>
                    下载成果图
                </button>
            </div>
            
            <div class="qr-container" id="qrContainer">
                <div id="qrcode"></div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    
    <!-- 添加滑动条实时变色的JavaScript代码 -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 将开关控件转换为复选框
            const switchContainers = document.querySelectorAll('.switch-container');
            
            switchContainers.forEach(function(container) {
                const parentItem = container.closest('.setting-item');
                const checkbox = container.querySelector('input[type="checkbox"]');
                const id = checkbox.id;
                const isChecked = checkbox.checked;
                
                // 创建新的复选框HTML
                const checkboxHTML = `
                    <label class="checkbox-container">
                        <input type="checkbox" class="setting-checkbox" id="${id}" ${isChecked ? 'checked' : ''}>
                        <span class="checkmark"></span>
                    </label>
                `;
                
                // 替换开关为复选框
                container.outerHTML = checkboxHTML;
            });
            
            // 获取所有range滑动条
            const rangeInputs = document.querySelectorAll('input[type="range"]');
            
            // 为每个滑动条添加事件监听
            rangeInputs.forEach(function(input) {
                // 初始化滑动条样式
                updateRangeStyle(input);
                
                // 监听滑动事件
                input.addEventListener('input', function() {
                    updateRangeStyle(this);
                });
                
                // 添加鼠标按下事件监听（激活状态）
                input.addEventListener('mousedown', function() {
                    this.classList.add('active');
                });
                
                // 添加触摸开始事件（移动端）
                input.addEventListener('touchstart', function() {
                    this.classList.add('active');
                });
            });
            
            // 全局监听鼠标松开事件，移除激活状态
            document.addEventListener('mouseup', function() {
                document.querySelectorAll('input[type="range"]').forEach(input => {
                    input.classList.remove('active');
                });
            });
            
            // 全局监听触摸结束事件，移除激活状态（移动端）
            document.addEventListener('touchend', function() {
                document.querySelectorAll('input[type="range"]').forEach(input => {
                    input.classList.remove('active');
                });
            });
            
            // 更新滑动条样式函数
            function updateRangeStyle(input) {
                // 计算滑动百分比
                const min = input.min || 0;
                const max = input.max || 100;
                const value = input.value;
                const percentage = ((value - min) / (max - min)) * 100;
                
                // 设置CSS变量来控制背景渐变
                input.style.setProperty('--value-percent', `${percentage}%`);
                
                // 更新显示值（如果有对应的显示元素）
                const valueDisplayId = input.id.replace('Range', 'Value');
                const valueDisplay = document.getElementById(valueDisplayId);
                if (valueDisplay) {
                    valueDisplay.textContent = value;
                    
                    // 添加轻微的缩放动画效果
                    valueDisplay.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        valueDisplay.style.transform = 'scale(1)';
                    }, 200);
                }
            }
        });
    </script>
</body>
</html> 
</html> 